5

您好我正在尝试限制 contenteditable="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/

4

1 回答 1

3

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

这是小提琴

计数器现在可以正常工作了。剩下的就是如果用户超过了应该做的限制。

如果您使用过 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 ()了它将检查文本区域内的输入而不是按键，那么它应该照顾用户在文本区域内复制粘贴文本。我也改变了计数器的工作方式。我相信你可以自己弄清楚逻辑。

于 2013-09-11T08:06:34.393 回答