Question

您好我正在尝试限制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");
    }
});

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

如果div默认包含任何文本，则在插入或删除任何文本之前，不会更新剩余的字符数。
如果用户超过了最大字符数，则滑架将移至文本框的开头并删除第一个字符而不是最近插入的字符。
如果用户粘贴的文字超过200个字符，则不会缩短。

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

Answer 1

这是我提供解决方案的方法。它有一个难题，我很快就会完成。

以下是fiddle

计数器现在可以正常工作。如果用户超出限制应该做什么，剩下的是什么。

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

contenteditable =“true”div字符限制

1 个答案: