字符数量在一个可信的div中

Question

我正试图在contenteditable div中设置一个“类似Twitter”字符计数器。我想限制用户输入最多140个字符。

我使用jQuery来计算字符并显示剩余的字符，但它不会将Enter键（新行）计为字符。我也需要计算新的行数。

我尝试使用textarea，但我需要指定滚动条的max-height仅在max-height上可见。行或字符没有限制。

样本： https://jsfiddle.net/oLomzakh/

你能帮我弄清楚如何在字符数上加入新行数吗？

Answer 1

我认为你可以使用$ .html（）代替$ .text（），你可以知道什么时候有\ n，但是使用$ .text（）它会赢得＃t算上特殊的字符。

您可以使用＆＃34; this.innerText.length＆＃34;属性也是如此，没有jQuery，但它会计算\ r \ n而不只是1个字符的新行。

编辑：您可以获取$ .html（）并将每个新行<br>替换为仅一个字符，然后您只需获取该结果的属性长度。

Answer 2

Firstly, working code:

maxCharacters = 140;

$('#char-count').text(maxCharacters);

$('#text-area').bind('input', function() {

    var count = $('#char-count');
    var characters = $(this).text().length;
    var newlines = $($(this).html()).length;

    if (!!newlines) newlines -= 1;

    characters += newlines;

    if (characters > (maxCharacters - 11)) {
        count.addClass('over');
    } else {
        count.removeClass('over');
    }
    count.text(maxCharacters - characters);

});

现在，解释一下：

似乎content-editable使用HTML呈现新行（至少在Webkit中）。在事件处理程序中添加debugger;语句并检查$(this).html()的值将显示：

正如您所看到的那样，div和br都存在。

这就是var newlines = $($(this).html()).length;的来源。这会计算元素的子元素（包括div和br）。我们还需要将newlines调整为-1，因为一旦修改，总会有剩余的div或br。

我们可以将其添加到$(this).text()值以获得实际字符数。

Answer 3

马丁斯的回答是正确的。 但如果你想要白色空格和特殊字符，你需要这个：

maxCharacters = 140;

$('#char-count').text(maxCharacters);

$('#text-area').bind('input', function() {

    var count = $('#char-count');
    var characters = $(this).text().length;

    if (characters > (maxCharacters - 11)) {
        count.addClass('over');
    } else {
        count.removeClass('over');
    }
    count.text(maxCharacters - characters);
});

我删除了这三行代码：

var newlines = $($(this).html()).length;

if (!!newlines) newlines -= 1;

characters += newlines;