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

Question

我有这个代码

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

这在 jquery 中

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

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

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

Demo

解释:

在 contenteditable div 上的 keydown 或 paste 事件上，我们检查 lengthdiv 的 达到了 100，如果用户没有点击退格键，则阻止用户通过点击任意键或什至通过右键单击粘贴来输入更多字符。