Firefox устанавливает неправильное положение позиции каретки.

игровая площадка

Это упрощенная версия моей проблемы. похоже, я не могу поместить позиционированный элемент psuedo внутри contentEditable и все же иметь каретку в правильном месте, когда вы нажимаете, чтобы сосредоточиться на элементе DIV.

HTML

<div contentEditable></div>

SCSS

$pad:10px;
div{ padding:$pad; border:1px solid #CCC; height:120px; position:relative; 
    &:before{ position:absolute; top:$pad; left:$pad; content:"some text"; }
}

ОБНОВЛЕНИЕ - НАЙДЕН СООБЩЕННОЙ ОШИБКИ:

проголосуйте за эту ошибку, подлежащую ремонту - https://bugzilla.mozilla.org/show_bug.cgi?id=904846

Ответ 1

Возникает проблема, когда вы ставите элемент :after в абсолютный. Я не могу понять, почему. Но если вы просто поместите его относительно, проблема исчезнет.

Я обновил вашу скрипку: http://jsfiddle.net/NicoO/Lt3Wb/1/

Вот новый CSS (с некоторыми экспериментальными дополнениями)

$pad:10px;

div{ 
    padding:$pad; 
    border:1px solid #CCC;
    height:120px;
    position:relative; 

 &:before
 { 
     position:relative;
     color:#999;
     content:"Write a comment..."; 
 }   
}

div:focus
{
    border-color: red;
}

div:not(:empty):before{
    display: none;
}

Единственная проблема, которая остается в том, что вы можете сфокусироваться на тексте элемента :before. Вот почему вы хотели, чтобы это было абсолютно. Представление также: если вы поместите псевдоэлемент в float: left;, он будет показывать то же поведение, что и на position:absolute;.

Обновление

Когда вы вынуждены использовать абсолютные элементы peseudo, на данный момент существует только одно решение. Определите другое дополнение для окна, пока оно пустое и сфокусированное. Игровая площадка: http://jsfiddle.net/NicoO/Lt3Wb/5/

$pad:10px;
#test
{ 
    padding: $pad; 
    border:1px solid #CCC;
    height:120px;
    position:relative; 
    overflow: hidden;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;    

    &:empty:focus
    {
        padding: #{($pad*2)+6} $pad; 
    }

    &:before 
    { 
        position:absolute;
        color:#999;
        top: $pad;
        left: $pad;
        content: "Leave a comment"
    }   
}

Ответ 2

Для меня это была проблема, когда ящик был пуст. Поэтому я засеял его <br>:

  $("[contenteditable='true']").on('focus', function(){
    var $this = $(this);
    $this.html( $this.html() + '<br>' );  // firefox hack
  });

  $("[contenteditable='true']").on('blur', function(){
    var $this = $(this);
    $this.text( $this.text().replace('<.*?>', '') );
  });

Дополнительная информация здесь: https://bugzilla.mozilla.org/show_bug.cgi?id=550434

Ответ 3

Одна из проблем этой проблемы заключается в том, чтобы обернуть редактируемый контент внутри DIV и дать этому DIV фиксированную высоту.

То есть, если у вас есть такая конфигурация, как это:

<div id="wrapper">
    <div contentEditable></div>
</div>

Тогда CSS может быть следующим:

#wrapper {
  width: 240px;
  height: 70px;
  margin: 0 20px 0;
  overflow-y: auto;
  overflow-x: hidden;
}

#wrapper div[contenteditable=true] {
  width: 100%;
  min-height: 35px; /* Not mandatory */
  padding: 8px;
}