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

Question

我有这个代码

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

这在 jquery 中

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

如何防止用户在 contenteditable div 中输入超过 100 个字符

原文由 J.doe 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

演示

解释：

On keydown or paste event on the contenteditable div we check if the length of the div 达到 100 并且如果用户没有单击退格键而不是阻止用户通过单击任意键或什至通过右键单击粘贴来输入更多字符。

原文由 Mr. Alien 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我通过使用上面提到的答案来概括代码来做了类似的事情，这样你就可以为任何可满足的 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 元素提及最大长度。希望这会有所帮助。

原文由 Roshith 发布，翻译遵循 CC BY-SA 3.0 许可协议