防止 <span> 在 contenteditable <div> 中被删除

Question

我正在努力使这个内容可编辑 div 表现得像 Twitter 的文本区域。目标是能够突出显示超出字符限制输入的字符（就像 twitter 所做的那样），使用 <textarea> 结果是不可能的，因为我了解到你不能 select 一段文本和格式化它（如果我错了，请随时纠正我）。

就是说，我知道以前有人问过这样的问题，但我的问题，因为我在那个更大的领域工作，是非常具体的。我有以下代码：

    <div id="myTextArea" class="" contenteditable="true">
        <span id="textAreaContent">enter text here...</span>
        <div id="charCountWrapper">
            <span id="charCounter"></span>
        </div>
    </div>

jQuery 使它完成我需要它做的代码：

var maxCharacters = 50;
$('#charCounter').text(maxCharacters);

$('#myTextArea').bind('input', function(){
    var charCount = $('#charCounter');
    var currentStr =  $('#textAreaContent').text();
    var newlines = $($(this).html()).length;
    var currentStrLength = currentStr.length;
    console.log(currentStr);    

    if (!!newlines) newlines -= 1;
    currentStr += newlines;

    if (currentStrLength > (maxCharacters - 11))
        charCount.addClass('over');
    else
        charCount.removeClass('over');

    charCount.text(maxCharacters - currentStrLength);

    if(currentStrLength == 0) {
        var node = document.createElement("span");          // Create a <span> node
        node.setAttribute("id","textAreaContent");
        var textnode = document.createTextNode("");         // Create a text node
        node.appendChild(textnode);                              // Append the text to <li>
        document.getElementById("myTextArea").appendChild(node);
    }
});

当我从 <span> 中删除最后一个字符时，标签会自动删除并且我的计数器停止工作。我尝试手动添加一个新的 <span> 来替换旧的，但这也没有用。我该如何解决这个问题，当我删除最后一个字符时，计数为 0，一旦我再次开始添加字符，计数器就会正常工作。

当我到达最后一个字符时：

一旦我删除了最后一个字符：

Answer 1

解决方案实际上非常简单:-)。

<span> 默认是一个 inline 元素，并且具有其内容的宽度。当你里面没有内容时，宽度为0.

所以只需将它设置为 display:block; 并确保 width:100%; 即可。

这是工作 fiddle:

var maxCharacters = 50;
$('#charCounter').text(maxCharacters);

$('#myTextArea').bind('input', function(){
    var charCount = $('#charCounter');
    var currentStr =  $('#textAreaContent').text();
    var newlines = $($(this).html()).length;
    var currentStrLength = currentStr.length;
    console.log(currentStr);    

    if (!!newlines) newlines -= 1;
    currentStr += newlines;

    if (currentStrLength > (maxCharacters - 11))
        charCount.addClass('over');
    else
        charCount.removeClass('over');

    charCount.text(maxCharacters - currentStrLength);

    /*if(currentStrLength == 0) {
        var node = document.createElement("span");          // Create a <span> node
        node.setAttribute("id","textAreaContent");
        var textnode = document.createTextNode("");         // Create a text node
        node.appendChild(textnode);                              // Append the text to <li>
        document.getElementById("myTextArea").appendChild(node);
    }*/
});

#textAreaContent{
    width:100%;
    display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myTextArea" class="" contenteditable="true">
        <span id="textAreaContent">enter text here...</span>
        <div id="charCountWrapper">
            <span id="charCounter"></span>
        </div>
    </div>

附加信息：因此您的 span 元素从未被删除，但宽度为 0。

防止 <span> 在 contenteditable <div> 中被删除

Preventing <span> from deletion in a contenteditable <div>

jquery

textarea

contenteditable