内容可编辑= "true" div 字符限制

Question

嗨，我正在尝试限制内容可编辑="true"div中的文本：

var char = 500;
$("#counter").append("You have <strong>" + char + "</strong> chars left.");
$("#editor").keypress(function () {
    if ($(this).text().length > char) {
        $(this).text($(this).text().substr(1));
    }
    var rest = char - $(this).text().length;
    $("#counter").html("You have <strong>" + rest + "</strong> chars left.");
    if (rest <= 100) {
        $("#counter").css("color", "#ff7777");
    }
    else {
        $("#counter").css("color", "#111111");
    }
});

不幸的是，我面临以下问题：

1. 当div 默认包含任何文本时，剩余的字符数在插入或删除之前不会更新。
2. 如果用户超过最大字符数，则回车将转到文本框的开头，并删除第一个字符，而不是最近插入的字符。
3. 如果用户粘贴的文本长度超过 200 个字符，则不会缩短该文本。

请找到代码：http://jsfiddle.net/mmacin/A69tk/1/

Answer 1

这是我提供解决方案的方法。它缺少一块拼图，我将很快完成。

这是小提琴

计数器现在按预期工作。剩下的就是如果用户超过限制应该做什么。

如果你使用过Twitter，你会看到他们不会去除多余的字符，而是用红色选择突出显示这些字符，以向用户显示这些字符不会成为推文的一部分。也许这样的替代方案会更好

这是我使用的jQuery。

const limit = 200;
rem = limit - $('#editor').text().length;
$("#counter").append("You have <strong>" + rem + "</strong> chars left.");
$("#editor").on('input', function () {
    var char = $('#editor').text().length;
    rem = limit - char;
    $("#counter").html("You have <strong>" + rem + "</strong> chars left.");
    console.log(char)
    console.log(rem);
    if (char >= 100) {
        $("#counter").css("color", "#ff7777");
    }
    else
        $("#counter").css("color", "#111111");
    if(char>200)
    {
        //add code to either remove extra chars or highlight them.
    }
});

如果您看到我使用了$("#editor").on('input', function ()它将检查文本区域内的输入而不是按键，以便处理用户在文本区域内复制粘贴文本。此外，我还更改了计数器的工作方式。我相信你可以自己弄清楚逻辑。