限制WYSIWYG编辑器中的字符数（NicEdit）

我有这个jQuery代码：

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

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

Answer 2

你必须瞄准漂亮的编辑div。

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

如果您有多个编辑器，此解决方案将无法使用。

Answer 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)); } }); 

placeCaretAtEnd函数来自这里