Firefox设置错误的插入位置contentEditable with：before

Question

playground

这是我的问题的简化版本。
似乎我不能在contentEditable中放置一个定位的伪元素，但是当点击以获得焦点在 contentEditable 元素上时，插入符号位于正确的位置。

div{ padding:10px; border:1px solid #CCC; height:120px; position:relative; }

div::before{ 
  position:absolute; 
  top:10px; 
  left:10px; 
  content:"placeholder"; 
  color:#AAA; 
  transition:.2s;
  opacity:0;
}

div:empty::before{
  opacity:1;
}

<div contentEditable></div>

更新 - 找到报告的BUG：

请投票支持修复此错误 - https://bugzilla.mozilla.org/show_bug.cgi?id=904846

Answer 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元素的文本。这就是为什么你想要绝对的原因。 Interessting：如果你将伪元素放到float: left;，它会显示与position:absolute;上相同的行为。

<强>更新

当你被迫对伪元素使用绝对值时，目前似乎只有一种解决方案。为盒子定义另一个填充，只要它是空的并且是聚焦的。游乐场：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"
    }   
}

Answer 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

Answer 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;
}