javascript - 阻止插入值？

Question

我正在做一个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);
    }
});

Answer 1

您定义一个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" />