设置内容可编辑元素的最大长度

Question

我有这个代码

<div id="IIYBAGWNBC" contenteditable="true"></div>

这在jquery中

$("#IIYBAGWNBC").text(function(index, currentText) {
  return currentText.substr(0, 100);
});

如何阻止用户输入超过100个字符 contenteditable div

Answer 1

它非常简单,可以keydown计算元素字符串的长度,如果他试图输入超过100个字符,则会阻止用户

$('div').on('keydown paste', function(event) { //Prevent on paste as well

  //Just for info, you can remove this line
  $('span').text('Total chars:' + $(this).text().length); 

  //You can add delete key event code as well over here for windows users.
  if($(this).text().length === 100 && event.keyCode != 8) { 
    event.preventDefault();
  }
});

演示

说明:

上keydown或者paste在事件contenteditable div我们检查length的div达成100,如果用户不点击退格键不是阻止用户通过点击任意键或甚至右键粘贴在多个字符养活.

Answer 2

我通过使用上面提到的答案来概括代码来做到这一点，以便您可以为任何contenteditable div设置最大长度

$("div[contenteditable='true'][maxlength]").on('keydown paste', function (event) {
     var cntMaxLength = parseInt($(this).attr('maxlength'));

     if ($(this).text().length === cntMaxLength && event.keyCode != 8) {
         event.preventDefault();
     }
});

HTML将如下所示

<div id="IIYBAGWNBC" contenteditable="true" maxlength="500"></div>

这样，您可以在任何可编辑内容的Div元素中提及maxlenght。希望这会有所帮助。