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

说明：

在keydown paste上的contenteditable或div事件中，我们会检查length的{{1}}是否已达到div如果用户没有单击退格键，则阻止用户通过单击任意键或甚至右键单击粘贴来输入更多字符。

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将如bewlow

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

通过这种方式你可以向任何一个满足的Div元素提及maxlenght。希望这有用。

Answer 3

只需在不使用javascript的html中进行操作即可。

<div contenteditable="true" onkeypress="return (this.innerText.length <= 26)"> </div>

Answer 4

此代码完成了工作，请注意使用“ keyup”而不是“ keydown”来正确处理ctrl-v事件，此外，此代码不包含箭头键，最后请注意如果到达以下位置，则会剪切文本的代码限制：

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

     if ($(this).text().length >= cntMaxLength && event.keyCode != 8 && 
         event.keyCode != 37 && event.keyCode != 38 && event.keyCode != 39 && 
         event.keyCode != 40) {
         
         event.preventDefault();

         $(this).html(function(i, currentHtml) {
             return currentHtml.substring(0, cntMaxLength-1);
         });
     }
});

然后，在您的html中：

<div contenteditable="true" maxlength="1024"></div>

Answer 5

不幸的是，上述解决方案不能涵盖所有情况！如果要更正确地限制contenteditable元素的字符数（包括插入的文本），可以使用我的轻量级库-https://github.com/antpv/contenteditable-max-length

Answer 6

如果您正在使用react。用这个 react-text-content-editable

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

6 个答案: