javascript - 阻止插入值?

标签 javascript jquery regex input

我正在做一个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可以使用keyupchange事件来检查新输入的值,如果新值无效则将其更改回来到lastValidValue

注意:您可以在不触发 keyupkeydown 的情况下修改值,例如右键单击并粘贴

这是一个例子

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/

相关文章:

javascript - 悬停时的文本滚动不适用于 jQuery 2.2.0

javascript - Jquery 模态弹出导致页面滚动

javascript - PHP - 通知 : Undefined index: and not displaying data

php - 单词 null 或双引号中的字符串的正则表达式

javascript - jquery 在两个按钮之间切换

javascript - 如何在 Rails 中预填充动态添加的表单输入

javascript - 多次生成带有名称标签和 Logo 的二维码

regex - 如何将以下内容与正则表达式匹配?

PHP:如何获取 preg_match_all 的字符串索引?

javascript - ng-model 与二维数组绑定(bind)