Question

我试图让这个有意思的div表现得像Twitter的文本区域。我们的目标是能够突出显示超出角色限制的字符（就像推特所做的那样），使用<textarea>就不可能了，因为我知道你无法选择文本的一部分并对其进行格式化（请如果我错了，请随时纠正我。

那就是说，我之前已经问过这样的问题，但是当我向更大的区域努力时，我的问题非常具体。我有以下代码：

    <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>来替换旧的Sequence，但这也没有用。我如何解决这个问题，当我删除最后一个字符时，计数为0，一旦我再次开始添加字符，计数器就能正常工作。

当我在最后一个角色时：

删除最后一个字符后：

Answer 1

解决方案实际上非常简单： - ）。

默认情况下，

<span>是inline元素，并且具有其内容的宽度。当您没有内容时，宽度为0。

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

这是工作小提琴：

＆＃13;

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);
    }*/
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

在可疑的<div>

1 个答案: