我想将可编辑 div 中的字符数限制为 10。在用户达到限制后,我想使用 .preventDefault()
方法来保护 div 免受额外字符的影响。你能帮帮我吗?
JSFiddle https://jsfiddle.net/7x2dfgx6/1/
HTML
<div class="profileInfo" id="About" style="border:solid;" contenteditable="true">OOOOO</div>
JQuery
jQuery(document).ready(function($){
const limit = 10;
rem = limit - $('#About').text().length;
$("#counter").append("You have <strong>" + rem + "</strong> chars left.");
$("#About").on('input', function(event) {
var char = $('#About').text().length;
rem = limit - char;
$("#counter").html("You have <strong>" + rem + "</strong> chars left.");
if(char>limit)
{
event.preventDefault();
//TODO
}
});
});
最佳答案
回答你的主要问题:
.preventDefault()
取消 cancelable 事件的行为. input
事件不是 .
要检查事件
是否可取消,请尝试:console.log(event.cancelable);
。
对于输入
它会说“假”
你可能想要这样的东西(未经测试):
const limit = 10;
var rem = limit - $('#About').text().length;
$("#counter").append("You have <strong>" + rem + "</strong> chars left.");
$("#About").on('input', function(event) {
var char = $(this).text().length;
rem = limit - char;
if(rem <= 0){
$(this).text($(this).text().slice(0, limit));
}
$("#counter").html("You have <strong>" + rem + "</strong> chars left.");
});
编辑
JSFiddle demo
由于它是 contentEditable,我不得不使用额外的代码(来自 this 答案)在输入的末尾设置插入符号。
关于javascript - .preventDefault() 无法正常工作。 ('input', 函数{}),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32298064/