jquery - 限制所见即所得编辑器 (NicEdit) 中的字符数

Question

我有这个 jQuery 代码:

var char = 60;
    $("#counter").append("You have <strong>" + char + "</strong> char.");
    $("#StatusEntry").keyup(function () {
        if ($(this).val().length > char) {
            $(this).val($(this).val().substr(0, char));
        }
        var rest = char - $(this).val().length;
        $("#counter").html("You have <strong>" + rest + "</strong> char.");
        if (rest <= 10) {
            $("#counter").css("color", "#ff7777");
        }
        else {
            $("#counter").css("color", "#111111");
        }
    });

效果很好!但如果改为 val() 我有 text() 它不起作用。

问题是，在可用字符的末尾，它开始从头开始替换文本......使用 val 是完美的。

为什么我需要在文本上使用它？因为我使用的是所见即所得插件，它将我的文本区域转换为 div。

我正在尝试使用 .stopPropagation 但它不起作用..尝试返回 false 但没有任何结果...

希望得到您的帮助!

Answer 1

如果您需要使用 NicEdit，那么您可以通过将 keyup/keydown 事件绑定(bind)到新创建的 div 来限制击键(它不会替换您的文本区域 - 它会添加一个 div 并隐藏您的文本区域):

$("#StatusEntry").prev().keydown(function () {

这是有效的，因为新创建的 div 始终位于文本区域之前 - 因此这适用于多个编辑器。

但是，正如您在评论中似乎指出的那样，contentEditable div 可能就足够了 - 如果使用以下方法:

    var char = 60;
    $("#counter").append("You have <strong>" + char + "</strong> char.");
    $("#StatusEntry").keyup(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> char.");
        if (rest <= 10) {
            $("#counter").css("color", "#ff7777");
        }
        else {
            $("#counter").css("color", "#111111");
        }
    });

演示:http://jsfiddle.net/RjNuX/3