Question

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

在镀铬中，效果很完美！光标位于div的开头，在文本占位符之前，在IE中光标位于末尾....

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

示例 - ＆gt; codepen

任何解决方案？

Answer 1

你可以使用JS：

＆＃13;

    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...";
      }
    }

＆＃13;

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

＆＃13;

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

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

解决方案 - ＆gt; 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; 
});

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

3 个答案: