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

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 我们检查 div 的 length 是否达到 100 并且如果用户没有单击退格键而不是阻止用户通过单击任意键或什至通过右键单击粘贴来输入更多字符。

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 元素提及最大长度。希望这对您有所帮助。

Answer 3

只需 html 即可，无需 javascript。

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

Answer 4

如果你正在使用反应。用这个 react-text-content-editable

Answer 5

此代码完成工作，请注意正确处理 ctrl-v 事件时使用“keyup”而不是“keydown”，此外，此代码不包括箭头键，最后请注意剪切文本的代码，如果你达到上限：

$("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 6

很遗憾，上述解决方案并未涵盖所有情况！如果你想更正确地限制 contenteditable 元素的字符数，包括插入的文本，你可以使用我的轻量级库 - https://github.com/antpv/contenteditable-max-length

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

Set max length for content editable element

html

jquery

contenteditable