IE中的占位符div不起作用（光标出现在末尾）

Question

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

在镀铬，工作完美！光标位于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>

It works perfectly in IE and Chrome... didn't test Firefox or other browsers, but it should work on all browsers with JS enabled.

Answer 2

我今天也碰到了这个。您只需要进行一些调整即可使其与IE11一起使用：

[contenteditable=true]:empty::after {
    content: attr(placeholder);
    display: block; /* For Firefox */
    cursor: text; /* For Chrome */
    position: absolute;
    top: 0;
    line-height: 2em;
}
[contenteditable=true] {
    position: relative;
}

使用绝对定位将其从文档流中取出。但是当你输入然后退格所有角色时仍然会产生奇怪的效果，这就是为什么我把它改成::after。

我还注意到Chrome会在占位符上方使用普通光标，因此我必须明确告诉它使用文本光标。

Answer 3

解决方案 - > http://jsfiddle.net/1shhhn7z/1/

$(document).on('click', '.reply-comment',function() {
var reply = $('<div class="container-reply"><div class="unselectable div-placeholder"><div class="div-placeholder2">Type a text...</div></div><div class="initial-comment"><div class="inputAddReplyComment inputADD2" contenteditable="true" spellcheck="true" aria-expanded="true" title="" data-placeholder="" id="" style=""></div></div></div>').insertAfter($(this).parent());


    reply.find('.div-placeholder').on('mousedown mouseup click', function(e) { reply.find('.inputAddReplyComment').focus(); });

    reply.find('.inputAddReplyComment').on('focus',function(e){
        var editable = this;
        function listener(evt) {
            if ($(this).text().length>0)
                reply.find('.div-placeholder').attr("style","display:none;");
            else reply.find('.div-placeholder').attr("style","display:show;");
        }
        if (editable.addEventListener) {                    
            if (navigator.userAgent.indexOf('Chrome') > -1)
                editable.addEventListener("input", listener, false);
            else // The event 'input' not work in IE11 ... It has to work!! I don't know why not fire... =/
            {
                editable.addEventListener("input", listener, false);
                editable.addEventListener("DOMNodeInserted", listener, false);
                editable.addEventListener("DOMNodeRemoved", listener, false);
                editable.addEventListener("DOMCharacterDataModified", listener, false);                     
                editable.addEventListener("keyup", listener, false);
                editable.addEventListener("keydown", listener, false);
            }                   
        }
        e.stopPropagation();                
    });         
    reply.find('.inputAddReplyComment').focus();
return false; 
});