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

2022-09-01 00:00:00 jquery html contenteditable

我收到此代码

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

和jQuery中的这个

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

如何防止用户在contenteditablediv

中输入超过100个字符

解决方案

很简单,在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

解释:

keydownpaste事件上,在contenteditablediv上,我们检查divlength是否达到100,以及用户是否没有单击退格键,以防止用户通过单击任意键或甚至右击粘贴来输入更多字符。

相关文章