Довольствоваемое положение курсора/стиль в Firefox
-
22-09-2019 - |
Вопрос
У меня проблемы с использованием довольного в Firefox 3. У меня есть проблема, когда курсор появится выше или частично в DIV после того, как я нажимаю на него (пока я не начну печатать, когда он ведет себя правильно). Есть идеи о том, как я могу остановить это?
HTML:
<html> <head><title>Test Page</title></head> <body> <div id="editor" style="position:absolute; left:157px; top:230px; width:120px; height:30px"> <div id="input" style="width:100%; height:100%; border:1px solid black; outline:none" contentEditable="true"> </div> </div> </body> </html>
Решение 6
Я ждал и использовал контент, редактируемый только в Firefox 4 и выше. Я подал это и несколько других ошибок, которые команда Mozilla установила для FF 4.
Другие советы
У меня такая же проблема с Firefox 37.0.2. Установка пространства нулевой ширины в довольных: до того, как псевдо -элемент исправит проблему:
.contenteditable:empty:before {
content: "\200B";
display: inline;
}
Исправление работает во всех современных браузерах, в том числе IE11, который также имеет проблему по позиции в области карета, очень похожая на Firefox.
Вам нужно поместить какой -то контент или HTML между дивизоном, который вы хотите редактировать:
<div id="input" style="width:100%; height:100%; border:1px solid black; outline:none" contentEditable="true">Some sort of content or HTML here.</div>
Я часами гремел свой мозг, пытаясь найти способ взломать это. То, что я придумал, это обернуть редактора в Div, который скрыт по умолчанию. Затем используйте небольшой встроенный JavaScript, чтобы отобразить Div. Кажется, это заставляет курсор прыгать в правильную позицию. Это грязно, но это работает!
<div id="editor" style="display: none;">
<% call RTE.renderTextArea(true) %>
</div>
<script>document.getElementById("editor").style.display="";</script>
Я также столкнулся с этой проблемой в последней версии FF 22. В моем случае мой внешний Div (например, «редактор», как указано выше), не имела высоты, и моя позиция курсора была ниже довольного Div. Обеспечивая высоту внешнему дивизии, например, height: 1.5em;
, курсор правильно установил себя.
Это может быть решено путем создания слепого Div и добавить к нему фокус, тогда ваш браузер не сосредоточен на элементе довольного, но пользователь должен нажать на это, и в этом случае он показывает курсор в нужном месте.
$(document).ready(function(){
$("#target_blind").focus();
});
<div id="target_blind" style="display:none;"></div>
<div id="target" contenteditable="true"></div>
Есть один путь, однако это не решает проблему, только умножается.