在输入类型="数字"上使用正则表达式删除非数字

时间:2014-11-25 14:12:04

标签: javascript jquery html regex

我想从<input type="number">元素中删除用户输入中的所有非数字字符,但我无法使其工作。我的代码在<input type="text">元素上运行正常,但是当您将text更改为number时,完全相同的代码无效。

HTML:

<input type="text">
<input type="number">

jQuery的:

// Works
$("[type='text']").on("change",function(){
    var x = $(this).val();
    x = parseInt(x.replace(/\D/g,''),10);
    if (isNaN(x)) {x = "";}
    $(this).val(x);
});

// Doesn't work
$("[type='number']").on("change",function(){
    var x = $(this).val();
    x = parseInt(x.replace(/\D/g,''),10);
    if (isNaN(x)) {x = "";}
    $(this).val(x);
});

Fiddle

如何让它发挥作用?

更新:@ axlpl的回答让我们得到了我们需要的东西。我使用他的代码作为起点并对其进行了修改,以确保它与Apple的命令键一起使用,并允许在单元格中完成某些其他操作。 Fiddle

3 个答案:

答案 0 :(得分:2)

<input type="number">在验证中有某种构建。只要字段中包含无效字符,val()就为空。因此,您无法使用代码删除非数字元素,因为<input type="number">

的值中永远不会出现这样的字符

编辑:

我推荐http://jqueryvalidation.org/之类的东西。它将为您提供不同的验证选项,并具有易于使用的错误输出。有了这个,您可以在输入上方添加一些红色文本,并告诉用户他可以在此字段中输入什么内容。

答案 1 :(得分:1)

这是你的答案:

http://jsfiddle.net/qnb8ayr7/6/

JS与PASTE和CTRL + V

var ctrlDown = false;
var ctrlKey = 17, vKey = 86;

$("[type='number']").on("keydown", function(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode

    if (charCode == ctrlKey) ctrlDown = true;

    if(ctrlDown == true && charCode == vKey) {
        return true;
    }

    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;

}).keyup(function(evt)
{
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode == ctrlKey) ctrlDown = false;
});

$("[type='number']").bind("cut copy paste",function(evt) {
    var number = (evt.originalEvent || evt).clipboardData.getData('text/plain');
    x = parseInt(number.replace(/\D/g,''),10);
    console.log(number);
    $(this).val(x);
    evt.preventDefault();
});

答案 2 :(得分:1)

根据WHATWG,除非是有效的数字输入,否则您无法获取该值。输入数字field's sanitization algorithm表示如果值浮点数,UA将设置为空字符串。

简而言之,算法说:

If the value of the element is not a valid floating-point number, then set it to the empty string instead.

通过指定<input type="number">,您的浏览器会被指示为您运行算法, 这就是为什么允许非数字你必须使用<input type="text">

其次,您无法在此字段中使用change事件。 相反,你必须使用oninput来触发任何事件

FIDDLE to demostrate oninput