Question

我正在执行一个js函数，该函数将阻止某些输入数据插入input textbox中（例如，仅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。 / p>

注意：您无需触发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" />

防止价值被插入？

1 个答案: