contentEditable position position/style в FireFox

У меня возникли проблемы с использованием contentEditable в FireFox 3. У меня есть проблема, когда курсор появится выше или только частично в div после того, как я нажму на него (пока я не начну вводить текст в это время он ведет себя правильно). Любые идеи о том, как я могу остановить это?contentEditable position position/style в FireFox

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

источник

2009-12-31 Ben McCann

Я ждал и использовал контент, редактируемый только в Firefox 4 и выше. Я зарегистрировал это и несколько других ошибок, которые команда Mozilla исправила для FF 4.

источник

2010-08-03 05:57:52

Вам нужно поставить какой-то контент или HTML между DIV, который вы хотите редактируемые:

<div id="input" style="width:100%; height:100%; border:1px solid black; outline:none" contentEditable="true">Some sort of content or HTML here.</div>

источник

2009-12-31 23:30:47 KramerC

Спасибо. Таким образом, кажется, что простое размещение пробела между начальным и конечным тегами делает div редактируемым. Однако у меня есть проблема, которую я описал, где курсор появляется над/вне div. Любые идеи о том, как я могу справиться с этим? –

Кажется, что часть - ошибка. Эта же проблема возникает в этой демонстрации http://valums.com/wp-content/uploads/2009/10/editableText/demo/demo.htm – KramerC

Я гремел мой мозг в течение нескольких часов пытаясь найти способ взломать это. То, что я придумал, - это обернуть редактор в div, который по умолчанию скрыт. Затем используйте небольшой встроенный javascript для отображения div. Похоже, что курсор переходит в правильное положение. Его грязный, но он работает!

<div id="editor" style="display: none;"> 
    <% call RTE.renderTextArea(true) %> 
</div> 

<script>document.getElementById("editor").style.display="";</script>

источник

2010-06-06 22:39:30 WDuffy

Это можно решить, создав слепой div и добавив к нему фокус, тогда ваш браузер не будет ориентирован на контент, щелкните по нему, и в этом случае он отобразит курсор в нужном месте.

$(document).ready(function(){ 
    $("#target_blind").focus(); 
}); 

<div id="target_blind" style="display:none;"></div> 
<div id="target" contenteditable="true"></div>

Существует один способ, однако он не решает проблемы, только приподнимается.

источник

2011-11-16 02:16:31 optimista

Я также столкнулся с этой проблемой в последней версии FF 22. В моем случае мой внешний div (например, «редактор», как указано выше) не имел высоты, а моя позиция курсора была ниже допустимого div. Предоставляя высоту внешнему div, например. height: 1.5em;, курсор позиционирует себя правильно.

источник

2013-07-16 14:10:37 Blazes

У меня такая же проблема с Firefox 37.0.2. Ввод нулевой шириной пространства в contenteditable-х: прежде, чем псевдо-элемент фиксирует проблему:

.contenteditable:empty:before { 
    content: "\200B"; 
    display: inline; 
}

Исправление работает во всех современных браузерах, включая IE11, который также имеет каретку вопрос позиции весьма похожий на Фирефокс.

источник

2015-05-13 11:41:59 mbaer3000

Это вызвало добавленную пустую строку поверх контейнера '.contenteditable' когда вы нажали Enter в IE11 для меня. Это можно исправить, применяя ': empty'-псевдоселектор к' .contenteditable'. – jfd

Thx, добавил исправление к фрагменту кода. – mbaer3000

ответ

Смежные вопросы