什么是限制“数字”仅输入文本框的最佳方法?

我在找一些允许小数点的东西。

我看到很多这样的例子。但还没决定用哪一种。

Praveen Jeganathan报道

不再有插件,jQuery在1.7版本中实现了自己的jQuery. isnumeric()。 参见:https://stackoverflow.com/a/20186188/66767


当前回答

我认为这是解决这个问题的好方法,而且非常简单:

$(function() {
    var pastValue, pastSelectionStart, pastSelectionEnd;

    $("input").on("keydown", function() {
        pastValue          = this.value;
        pastSelectionStart = this.selectionStart;
        pastSelectionEnd   = this.selectionEnd;
    }).on("input propertychange", function() {
        var regex = /^[0-9]+\.?[0-9]*$/;

        if (this.value.length > 0 && !regex.test(this.value)) {
            this.value          = pastValue;
            this.selectionStart = pastSelectionStart;
            this.selectionEnd   = pastSelectionEnd;
        }
    });
});

例如:JSFiddle

场景覆盖

这里的大多数类似建议至少不能满足其中一项要求,或者需要大量代码来覆盖所有这些场景。

只允许1个小数点。 允许home键、结束键和方向键。 允许在任何索引上使用删除和退格。 允许在任何索引处编辑(只要输入匹配正则表达式)。 允许使用ctrl+v和shift+insert进行有效输入(与右键单击+粘贴相同)。 不闪烁文本值,因为没有使用keyup事件。 恢复无效输入后的选择。

失败场景

从0.5开始,只删除0是不行的。这可以通过将正则表达式更改为/^[0-9]*\.?[0-9]*$/,然后添加一个模糊事件,当文本框以小数点开始时(如果需要)在0前面。请参阅此高级场景,以更好地了解如何修复此问题。

插件

我创建了这个简单的jquery插件,使这更容易:

$("input").limitRegex(/^[0-9]+\.?[0-9]*$/);

其他回答

我认为这是解决这个问题的好方法,而且非常简单:

$(function() {
    var pastValue, pastSelectionStart, pastSelectionEnd;

    $("input").on("keydown", function() {
        pastValue          = this.value;
        pastSelectionStart = this.selectionStart;
        pastSelectionEnd   = this.selectionEnd;
    }).on("input propertychange", function() {
        var regex = /^[0-9]+\.?[0-9]*$/;

        if (this.value.length > 0 && !regex.test(this.value)) {
            this.value          = pastValue;
            this.selectionStart = pastSelectionStart;
            this.selectionEnd   = pastSelectionEnd;
        }
    });
});

例如:JSFiddle

场景覆盖

这里的大多数类似建议至少不能满足其中一项要求,或者需要大量代码来覆盖所有这些场景。

只允许1个小数点。 允许home键、结束键和方向键。 允许在任何索引上使用删除和退格。 允许在任何索引处编辑(只要输入匹配正则表达式)。 允许使用ctrl+v和shift+insert进行有效输入(与右键单击+粘贴相同)。 不闪烁文本值,因为没有使用keyup事件。 恢复无效输入后的选择。

失败场景

从0.5开始,只删除0是不行的。这可以通过将正则表达式更改为/^[0-9]*\.?[0-9]*$/,然后添加一个模糊事件,当文本框以小数点开始时(如果需要)在0前面。请参阅此高级场景,以更好地了解如何修复此问题。

插件

我创建了这个简单的jquery插件,使这更容易:

$("input").limitRegex(/^[0-9]+\.?[0-9]*$/);

这个函数做同样的事情,使用上面的一些想法。

$field.keyup(function(){
    var val = $j(this).val();
    if(isNaN(val)){
         val = val.replace(/[^0-9\.]/g,'');
         if(val.split('.').length>2) val =val.replace(/\.+$/,"");
    }
    $j(this).val(val); 
});

显示视觉反馈(出现错误字母后消失) 允许小数 捕获多个”。 没有问题的左/右del等。

这很简单,我们已经有一个javascript内置函数“isNaN”在那里。

$("#numeric").keydown(function(e){
  if (isNaN(String.fromCharCode(e.which))){ 
    return false; 
  }
});

有一个很好的jquery插件叫做jquery Mask plugin,设计用于在表单字段和html元素上做蒙版,但你也可以用它来简单地定义什么类型的数据可以在字段中输入:

$('.numeric-input').mask('0#');

现在只有数字将被允许在您的表单字段。

也允许负数

下面的代码也接受负数

HTML

<input type="text" name="myText" />

JS

var pastValue, pastSelectionStart, pastSelectionEnd;

$("input").on("keydown", function() {
    pastValue          = this.value;
    pastSelectionStart = this.selectionStart;
    pastSelectionEnd   = this.selectionEnd;
}).on("input propertychange", function() {

    if ( this.value.length > 0 && $.isNumeric(this.value) == false && this.value != '-' ) {
        this.value          = pastValue;
        this.selectionStart = pastSelectionStart;
        this.selectionEnd   = pastSelectionEnd;
    }
}).on('blur', function(){
        if(this.value == '-')
            this.value = '';
});