html - IE 中的占位符 div 不起作用(光标出现在末尾)

Question

光标不在div的开头!它出现在最后......在文本占位符之后!

在 chrome 中，完美运行!光标位于 div 的开头，文本占位符之前，在 IE 中，光标位于末尾....

[contenteditable=true]:empty:before{
  content: attr(placeholder);
  display: block; /* For Firefox */
}

示例 --> codepen

有什么解决办法吗？

Answer 1

你可以使用 JS:

    var div=document.getElementById("div");
    function clearPlaceholder() {
      if (div.innerHTML=="Enter text here...") {
        document.getElementById("div").innerHTML="";
      }
    }
    function addPlaceholder() {
      if (div.innerHTML=="") {
        document.getElementById("div").innerHTML="Enter text here...";
      }
    }

    <div contenteditable="true" onFocus="clearPlaceholder();" onFocusOut="addPlaceholder();" id="div">Enter text here...</div>

它在 IE 和 Chrome 中完美运行...没有测试 Firefox 或其他浏览器，但它应该在所有启用 JS 的浏览器上运行。