Question

我有一个内容可编辑的div，我写了一个自定义函数来获取字符数，如下所示：

var charCount = function (elem, event)  {
    var charBox = elem.find('.maxLengthCount'),
        txtBox = elem.find('textarea'),
        rte = elem.find('.textareaEditBox'),
        maxLength = parseInt(txtBox.attr('maxLength'));

    if(!rte.hasClass('placeholderText'))    {
        /* This is where the remaining characters are being counted */

        var remainingChars =  maxLength - rte.prop('innerHTML').length;

        charBox.html(remainingChars);
        if (remainingChars < 0) {
            charBox.parent('div').addClass('fntRed');
            rte.addClass('borderRed');
            txtBox.addClass('error');
        } else {
            charBox.parent('div').removeClass('fntRed');
            rte.removeClass('borderRed');
            txtBox.removeClass('error');
        }
    } else {
        charBox.html(maxLength);
    }           
}

charCount(wrapper, null);

editor.on('keyup', function(event)  {
    charCount($(this).closest('.field-wrapper'), event);
});

问题：我每次按＆lt;或者＆gt;字数减少4，每按一次空格键，字数减少6

Answer 1

当您编辑contenteditable元素的内容时，某些字符会在其html转义中转换：

"<" -> &#60; or &lt; (lesser than)
">" -> &#62; or &gt; (greater than)
" " -> &nbsp;        (Non-breaking space)

您必须使用原始值替换这些字符才能正确计算文本中的字符数。为什么不为此目的使用textarea？有了令人满意的元素，你会遇到更多麻烦，如粘贴图像或链接，textareas只是用于文本而不会像你的情况那样逃避角色。

Answer 2

计算文本的字符（或假定它是textarea元素的值），而不是元素中的HTML：

var remainingChars =  maxLength - rte.val().length;

内容可编辑字符数问题

2 个答案: