我有这个代码
<div id="IIYBAGWNBC" contenteditable="true"></div>
这在 jquery 中
$("#IIYBAGWNBC").text(function(index, currentText) {
return currentText.substr(0, 100);
});
如何防止用户在contenteditablediv中输入超过100个字符
【问题讨论】：
标签： jquery html contenteditable
这很简单，在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();
}
});
解释：
在contenteditablediv 上的keydown 或paste 事件上，我们检查div 的length 是否达到100，如果用户没有点击退格键而不是阻止用户输入通过单击任意键甚至右键单击粘贴更多字符。
【讨论】：
我通过使用上面提到的答案来概括代码做了类似的事情，这样你就可以为任何可编辑的 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 元素提及 maxlenght。 希望这会有所帮助。
【讨论】：
此代码完成了工作，请注意“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>
【讨论】：
很遗憾，上述解决方案并未涵盖所有情况！ 如果您想更正确地限制 contenteditable 元素的字符数，包括插入的文本，您可以使用我的轻量级库 - https://github.com/antpv/contenteditable-max-length
【讨论】：
您可以在没有 javascript 的情况下在 html 中进行操作。
<div contenteditable="true" onkeypress="return (this.innerText.length <= 26)">
</div>
【讨论】：
如果您使用的是反应。用这个 react-text-content-editable
【讨论】：