我正在做一个js函数,它将阻止一些输入数据插入到输入文本框
中(例如仅DDDDDD,DD):
// decimal
$('.is-decimal').keydown(function (e) {
// prevent to insert non-decimal number (number with comma, max 2 digits after comma)
var elem = $(this);
var value = elem.val();
var regex = /^\d+,?\d{0,2}$/;
if (!regex.test(value)) {
e.preventDefault();
}
});
但我不能使用 keydown: 第一次是空的,所以它不会检查以下字符。
我应该使用哪种方法? keyup
稍后(所以它只是插入);与 .on("input propertychange", function ()
编辑:我最好的尝试:
// decimal
$('.is-decimal').on("input propertychange", function (e) {
var elem = $(this);
var value = elem.val();
// prevent to insert non-decimal number (number with comma, max 2 digits after comma)
var regex = /^\d+,?\d{0,2}$/;
if (!regex.test(value)) {
elem.val(elem.attr('data-actual-value'));
e.preventDefault();
} else {
elem.attr("data-actual-value", value);
}
});
最佳答案
您定义一个lastValidValue
可以使用keyup
和change
事件来检查新输入的值,如果新值无效则将其更改回来到lastValidValue
。
注意:您可以在不触发 keyup
和 keydown
的情况下修改值,例如右键单击并粘贴
这是一个例子
let decField = document.querySelector('#decimal')
let lastValidValue = ''
const regex = /^\d+,?\d{0,2}$/;
const eventHandler = e => {
if( event.target.value.match(regex) ) {
lastValidValue = event.target.value
}
else {
event.target.value = lastValidValue
}
}
decField.addEventListener('keyup', eventHandler)
decField.addEventListener('change', eventHandler)
编辑:这是一个包含多个字段的示例,使用 data-regex
属性来拥有单独的正则表达式
const eventHandler = e => {
let regex = new RegExp(event.target.dataset.regex);
if( regex.test(event.target.value) ) {
event.target.dataset.lastValidValue = event.target.value
}
else {
event.target.value = event.target.dataset.lastValidValue || ''
}
}
document.querySelectorAll('input[data-regex]').forEach(field => {
field.addEventListener('keyup', eventHandler);
field.addEventListener('change', eventHandler);
})
<input type="text" data-regex="^\d+,?\d{0,2}$" placeholder="digits" />
<input type="text" data-regex="^[\w\s]+$" placeholder="text" />
<input type="text" data-regex="^\W+$" placeholder="special chars" />
关于javascript - 阻止插入值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51212667/