Довольствоваемое положение курсора/стиль в Firefox

StackOverflow https://stackoverflow.com/questions/1987435

Вопрос

У меня проблемы с использованием довольного в 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>

alt text

Это было полезно?

Решение 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>

Есть один путь, однако это не решает проблему, только умножается.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top