限制WYSIWYG编辑器中的字符数(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()它不起作用.

问题是,在可用的char结束时,它开始从一开始就替换文本......使用val是完美的.

为什么我需要它在文本上？因为我正在使用一个所见即所得的插件,它将我的textarea转换为div.

我正在尝试.stopPropagation但它不起作用..尝试返回false而没有...

希望对你有所帮助!

Answer 1

如果你需要使用NicEdit然后你可以通过将keyup/keydown事件绑定到新创建的div来限制击键(它不会替换你的textarea - 它会添加一个div并隐藏你的textarea):

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

这是有效的,因为新创建的div始终位于textarea之前 - 因此这适用于多个编辑器.

但是,正如您在评论中指出的那样,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