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

【问题标题】：Limit the number of characters in a WYSIWYG Editor (NicEdit)限制所见即所得编辑器 (NicEdit) 中的字符数
【发布时间】：2011-12-30 20:10:48
【问题描述】：

我有这个 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 是完美的。

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

我正在尝试 .stopPropagation 但它不起作用.. 尝试返回 false 并且什么都没有...

希望得到您的帮助！

【问题讨论】：

当您将 val() 更改为 text() 时，哪一行不起作用...什么不起作用？能否请您包含您的 HTML ...我不知道 statusentry 是什么...
如果您将每个 val() 更改为 text() 并开始输入，则在 60 char 处开始替换开始的文本。
喜欢这个 -> jsfiddle.net/RjNuX/1
你的 substr 不正确，在这里工作 -> jsfiddle.net/RjNuX/2
使用 div 和 contentEditable=true 对我来说很好 -> jsfiddle.net/RjNuX/3

标签： jquery text nicedit keyup

【解决方案1】：

如果您需要使用 NicEdit，那么您可以通过将 keyup / keydown 事件绑定到新创建的 div 来限制击键（它不会替换您的 textarea - 它会添加一个 div 并隐藏您的 textarea）：

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

这是可行的，因为新创建的 div 总是在 textarea 之前 - 所以这适用于多个编辑器。

但是，正如您似乎在 cmets 中指出的那样， 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

【讨论】：

您建议的解决方案有效，但是用 div 替换 textarea 只会取消表单提交。（没有要提交的文本区域）。如果不用 div 替换 textarea 怎么办？

【解决方案2】：

你必须定位漂亮的编辑 div。

$(".nicEdit-main").keyup(...

如果您有多个编辑器，此解决方案将不起作用。

【讨论】：

【解决方案3】：

var len = 40;    
$(".nicEdit-main").keydown(function () {
    if($(".nicEdit-main").html().length>len){
        var string = $('.nicEdit-main').html();
        $('.nicEdit-main').html(string.substring(0, len));
        placeCaretAtEnd($('.nicEdit-main').get(0));
    }
});

来自here的placeCaretAtEnd函数

【讨论】：