[英].preventDefault() not working in on.('input', function{})
我想將可編輯 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()
取消是事件的行為取消。 input
事件不是。
要檢查event
是否可取消,請嘗試: console.log(event.cancelable);
.
對於input
它會說“假”
你可能想要這樣的東西(未經測試):
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 演示
由於它是contentEditable ,我不得不使用額外的代碼(來自這個答案)在輸入的末尾設置一個插入符號。
使用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");
}
});
這是限制輸入中字符的一種方法。 適用於粘貼和打字。
/**
* 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)
})
})
我用 JavaScript 嘗試了這個解決方案。
輸入下方還有字符計數器。
HTML:
<input type="text" class="about">
<span></span>
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.`
})
正如 Artur 所說, input
事件是不可取消的。 它在 DOM 已經被修改后觸發。 相反,您應該收聽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>
但很可能,由於至少兩個原因,這段代碼仍然不能完全按照您的意願行事:
input
事件,例如刪除。嘗試更改 contenEditable 屬性的值。 我還將限制檢查設置為 >=
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.