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

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

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

Praveen Jeganathan报道

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


当前回答

不再有插件,jQuery在1.7版本中实现了自己的jQuery. isnumeric()。

jQuery。isNumeric(value) 确定其参数是否为数字。

样品结果

$.isNumeric( "-10" );     // true
$.isNumeric( 16 );        // true
$.isNumeric( 0xFF );      // true
$.isNumeric( "0xFF" );    // true
$.isNumeric( "8e5" );     // true (exponential notation string)
$.isNumeric( 3.1415 );    // true
$.isNumeric( +10 );       // true
$.isNumeric( 0144 );      // true (octal integer literal)
$.isNumeric( "" );        // false
$.isNumeric({});          // false (empty object)
$.isNumeric( NaN );       // false
$.isNumeric( null );      // false
$.isNumeric( true );      // false
$.isNumeric( Infinity );  // false
$.isNumeric( undefined ); // false

下面是如何将isNumeric()与事件侦听器绑定在一起的示例

$(document).on('keyup', '.numeric-only', function(event) {
   var v = this.value;
   if($.isNumeric(v) === false) {
        //chop off the last char entered
        this.value = this.value.slice(0,-1);
   }
});

其他回答

   window.jQuery.fn.ForceNumericOnly =
       function () {

           return this.each(function () {
               $(this).keydown(function (event) {
                   // Allow: backspace, delete, tab, escape, and enter
                   if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
                       // Allow: Ctrl+A
                       (event.keyCode == 65 && event.ctrlKey === true) ||
                       // Allow: home, end, left, right
                       (event.keyCode >= 35 && event.keyCode <= 39)) {
                       // let it happen, don't do anything
                       return;
                   } else {
                       // Ensure that it is a number and stop the keypress
                       if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                           event.preventDefault();
                       }
                   }
               });
           });
       };

把这个应用到你想要的所有输入上:

$('selector').ForceNumericOnly();

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

$(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]*$/);

我第一次尝试用jQuery解决这个问题,但我不满意不需要的字符(非数字)实际上出现在输入字段刚刚被删除在keyup。

在寻找其他解决方案时,我发现:

整数(非负)

<script>
  function numbersOnly(oToCheckField, oKeyEvent) {
    return oKeyEvent.charCode === 0 ||
        /\d/.test(String.fromCharCode(oKeyEvent.charCode));
  }
</script>

<form name="myForm">
<p>Enter numbers only: <input type="text" name="myInput" 
    onkeypress="return numbersOnly(this, event);" 
    onpaste="return false;" /></p>
</form>

来源:https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onkeypress的例子 实例:http://jsfiddle.net/u8sZq/

小数点(非负)

为了允许一个小数点,你可以这样做:

<script>
  function numbersOnly(oToCheckField, oKeyEvent) {        
    var s = String.fromCharCode(oKeyEvent.charCode);
    var containsDecimalPoint = /\./.test(oToCheckField.value);
    return oKeyEvent.charCode === 0 || /\d/.test(s) || 
        /\./.test(s) && !containsDecimalPoint;
  }
</script>

来源:刚刚写了这个。似乎起作用了。 实例:http://jsfiddle.net/tjBsF/

其他定制

要允许输入更多的符号,只需将它们添加到充当基本字符代码过滤器的正则表达式中。 要实现简单的上下文限制,请查看输入字段(oToCheckField.value)的当前内容(状态)

一些你可能会感兴趣的事情:

只允许有一个小数点 只有在字符串的开头才允许使用减号。这将允许负数。

缺点

插入符号位置在函数内不可用。这大大减少了你可以实现的上下文限制(例如,没有两个相等的连续符号)。不知道最好的方法是什么。

我知道标题要求jQuery解决方案,但希望有人会发现这是有用的。

不需要长代码的数字输入限制,只是尝试这段代码。 它还接受有效的int和float值。

Javascript方法

onload = function () { var ele = document.querySelectorAll('.number-only')[0]; 避署。Onkeypress =函数(e) { 如果(isNaN (this.value + " " + String.fromCharCode (e.charCode))) 返回错误; } 避署。Onpaste = function(e){ e.preventDefault (); } } <p>只接受有效的int和float值的输入框 <input class="number-only" type=text />

jQuery方法

$(函数(){ $ (' .number-only ') .keypress(函数(e) { if(isNaN(this.value+""+String.fromCharCode(e.charCode)))返回false; }) .on("剪切复制粘贴",函数(e){ e.preventDefault (); }); }); < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> <p>只接受有效的int和float值的输入框 <input class="number-only" type=text />

更新

上面的答案适用于最常见的用例——将输入验证为数字。

但是下面是特殊用例的代码片段

允许负数 在删除之前显示无效的击键。

$(function(){ $('.number-only').keyup(function(e) { if(this.value!='-') while(isNaN(this.value)) this.value = this.value.split('').reverse().join('').replace(/[\D]/i,'') .split('').reverse().join(''); }) .on("cut copy paste",function(e){ e.preventDefault(); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> Input box that accepts only valid int and float values.</p> <input class="number-only" type=text />

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

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

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