javascript - 限制 ContentEditable div 中的字符数

Question

我在我的 Web 应用程序中使用了 contenteditable div 元素，我正在尝试想出一个解决方案来限制该区域允许的字符数量，一旦达到限制，就尝试输入字符什么都不做。

这是我目前所拥有的:

var content_id = 'editable_div';

// Binding keyup/down events on the contenteditable div
$('#' + content_id).keyup(function(){ check_charcount(content_id, max); });
$('#' + content_id).keydown(function(){ check_charcount(content_id, max); });

function check_charcount(content_id, max)
{
    if($('#' + content_id).text().length > max)
    {
        $('#' + content_id).text($('#' + content_id).text().substring(0, max));
    }
}

这确实将字符数限制为“max”指定的数字，但是一旦该区域的文本由 jQuery .text() 函数设置，光标将自行重置到该区域的开头地区。

因此，如果用户继续键入，新输入的字符将被插入到文本的开头，文本的最后一个字符将被删除。所以真的，我只需要一些方法来将光标保持在内容可编辑区域文本的末尾。

Answer 1

将 event 对象传递给您的函数并在达到最大值时调用 e.preventDefault():

var content_id = 'editable_div';

max = 10;

//binding keyup/down events on the contenteditable div
$('#'+content_id).keyup(function(e){ check_charcount(content_id, max, e); });
$('#'+content_id).keydown(function(e){ check_charcount(content_id, max, e); });

function check_charcount(content_id, max, e)
{
    if(e.which != 8 && $('#'+content_id).text().length > max)
    {
       // $('#'+content_id).text($('#'+content_id).text().substring(0, max));
       e.preventDefault();
    }
}

尽管如此，您可能需要做更多的事情来允许用户执行诸如“删除”之类的操作。

此外，您或许可以摆脱 keyup 处理程序。 keydown 应该足够了。