[英].preventDefault() not working in on.('input', function{})
I would like to limit number of chars in my editable div to 10. After user reach the limit I would like to use .preventDefault()
method to protect the div from additional chars.我想将可编辑 div 中的字符数限制为 10。用户达到限制后,我想使用
.preventDefault()
方法来保护 div 免受其他字符的影响。 Can you help me out, please?请你帮帮我好吗?
JSFiddle https://jsfiddle.net/7x2dfgx6/1/ JSFiddle https://jsfiddle.net/7x2dfgx6/1/
HTML HTML
<div class="profileInfo" id="About" style="border:solid;" contenteditable="true">OOOOO</div>
JQuery 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
}
});
});
To answer your main question:要回答您的主要问题:
.preventDefault()
cancel behavior of the events that are cancelable . .preventDefault()
取消是事件的行为取消。 input
event is not . input
事件不是。
To check whether an event
is cancelable, try: console.log(event.cancelable);
要检查
event
是否可取消,请尝试: console.log(event.cancelable);
. .
For input
it will say "false"对于
input
它会说“假”
You may want something like this (untested):你可能想要这样的东西(未经测试):
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.");
});
EDIT编辑
JSFiddle demo JSFiddle 演示
Since it's contentEditable , I had to use an additional code (from this answer) to set a caret at the end of the input.由于它是contentEditable ,我不得不使用额外的代码(来自这个答案)在输入的末尾设置一个插入符号。
use keydown
instead of input
使用
keydown
代替input
jQuery(document).ready(function($){
const limit = 10;
rem = limit - $('#About').text().length;
$("#counter").append("You have <strong>" + rem + "</strong> chars left.");
$("#About").on('keypress', function(event) {
var char = $('#About').text().length;
if(char>limit)
{
return false;
//or
event.preventDefault();
//TODO
}
rem = limit - char;
$("#counter").html("You have <strong>" + rem + "</strong> chars left.");
});
});
el.addEventListener('input', function(event) {
if ( this.innerHTML.length >300 && event.keyCode != 8) {
document.execCommand("undo");
}
});
Here is one way to limit the characters in an input.这是限制输入中字符的一种方法。 Works with paste and typing.
适用于粘贴和打字。
/**
* Limit an inputs number of characters
* @param {event} e - event of the input the user is typing into
* @param {number} limit - number of characters to limit to
*/
function limitInputCharacters(e, limit){
if(!e){
return;
}
var inputText = e.target.value;
var charsLeft = limit - inputText.length;
if (charsLeft >= 0) {
// do something, or nothing
} else if (charsLeft < 0) {
e.target.value = inputText.slice(0, limit)
}
}
document.addEventListener("DOMContentLoaded", function() {
const aboutTextArea = document.getElementById('input-about');
aboutTextArea.addEventListener("input", function(e) {
limitInputCharacters(e, 300)
})
})
I tried this solution with JavaScript.我用 JavaScript 尝试了这个解决方案。
Also below the input is the character counter.输入下方还有字符计数器。
HTML: HTML:
<input type="text" class="about">
<span></span>
javascript: javascript:
let about = document.querySelector("input")
let text = document.querySelector("span")
const limit = 10
about.addEventListener("keypress" ,function(event) {
let char = about.value.length;
if(char>=limit){
event.preventDefault();
}
let rem = limit - char
text.innerText = ` You have ${rem} chars left.`
})
As Artur said , the input
event is not cancelable.正如 Artur 所说,
input
事件是不可取消的。 It fires after the DOM has already been modified.它在 DOM 已经被修改后触发。 Instead, you should listen to the
beforeinput
event:相反,您应该收听
beforeinput
事件:
jQuery(document).ready(function($){ const limit = 10; rem = limit - $('#About').text().length; $("#counter").append("You have <strong>" + rem + "</strong> chars left."); $("#About").on('beforeinput', function(event) { var char = $('#About').text().length; rem = limit - char; $("#counter").html("You have <strong>" + rem + "</strong> chars left."); if(char>=limit) { event.preventDefault(); } }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="profileInfo" id="About" style="border:solid;" contenteditable="true">OOOOO</div> <div id="counter"></div>
But likely, this code still does not do exactly what you want for at least two reasons:但很可能,由于至少两个原因,这段代码仍然不能完全按照您的意愿行事:
input
events, for example deletion, as soon as the character limit has been reached.input
事件,例如删除。Try changing the value of the contenEditable attribute.尝试更改 contenEditable 属性的值。 Also I set the check for the limit to >=
我还将限制检查设置为 >=
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;
event.preventDefault();
if(char>=limit)
{
$('#About').attr('contenteditable','False');
//TODO
}
$("#counter").html("You have <strong>" + rem + "</strong> chars left.");
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.