jQuery:限制"数字"的最佳方法是什么 - 只为文本框输入？(允许小数点)

Question

限制文本框的"数字"输入的最佳方法是什么？

我正在寻找允许小数点的东西.

我看到了很多例子.但尚未决定使用哪一个.

来自Praveen Jeganathan的更新

没有更多的插件,jQuery已经jQuery.isNumeric()在v1.7中实现了自己的插件.请参阅:https://stackoverflow.com/a/20186188/66767

Answer 1

如果要限制输入(而不是验证),则可以使用关键事件.这样的事情:

<input type="text" class="numbersOnly" value="" />

和:

jQuery('.numbersOnly').keyup(function () { 
    this.value = this.value.replace(/[^0-9\.]/g,'');
});

这立即让用户知道他们不能输入字母字符等,而不是稍后在验证阶段.

您仍然需要验证,因为输入可能通过使用鼠标切割和粘贴或可能通过可能不会触发键事件的表单自动完成程序来填充.

Answer 2

更新

有一个新的非常简单的解决方案:

它允许您对文本使用任何类型的输入过滤器<input>,包括各种数字过滤器.这将正确处理复制+粘贴,拖放,键盘快捷键,上下文菜单操作,不可键入的键和所有键盘布局.

请参阅此答案或在JSFiddle上自行尝试.

jquery.numeric插件

我已经使用jquery.numeric插件成功实现了许多表单.

$(document).ready(function(){
    $(".numeric").numeric();
});

此外,这也适用于textareas!

但是,请注意Ctrl + A,复制+粘贴(通过上下文菜单)和拖放+拖放将无法按预期工作.

HTML 5

随着对HTML 5标准的更广泛支持,我们可以使用元素的pattern属性和number类型input来限制仅数字输入.在某些浏览器(特别是谷歌浏览器)中,它也可以限制粘贴非数字内容.有关更多信息number和其他更新的输入类型,请点击此处.

Answer 3

我认为最好的答案就是上面提到的那个.

jQuery('.numbersOnly').keyup(function () {  
    this.value = this.value.replace(/[^0-9\.]/g,''); 
});

但我同意箭头键和删除按钮将光标捕捉到字符串末尾有点痛苦(因为它在测试时被踢回到我身边)

我添加了一个简单的更改

$('.numbersOnly').keyup(function () {
    if (this.value != this.value.replace(/[^0-9\.]/g, '')) {
       this.value = this.value.replace(/[^0-9\.]/g, '');
    }
});

这样,如果有任何按钮命中不会导致文本被更改,则忽略它.有了它,您可以点击箭头并删除而不跳到最后但它会清除任何非数字文本.

Answer 4

jquery.numeric插件有一些我通知作者的错误.它允许在Safari和Opera中使用多个小数点,并且您无法在Opera中键入退格键,箭头键或其他几个控制字符.我需要正整数输入,所以我最后只是写了自己的.

$(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39];
  // IE doesn't support indexOf
  var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
  // Some browsers just don't raise events for control keys. Easy.
  // e.g. Safari backspace.
  if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
      (49 <= event.which && event.which <= 57) || // Always 1 through 9
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});

Answer 5

没有更多的插件,jQuery已经在v1.7中添加了自己的jQuery.isNumeric().

jQuery.isNumeric( value )

确定其参数是否为aumber.

样品结果

$.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);
   }
});

Answer 6

上面提到的numeric()插件在Opera中不起作用(你不能退格,删除甚至使用后退或前进键).

JQuery或Javascript中的以下代码将完美地工作(并且它只有两行).

JQuery的:

$(document).ready(function() {
    $('.key-numeric').keypress(function(e) {
            var verified = (e.which == 8 || e.which == undefined || e.which == 0) ? null : String.fromCharCode(e.which).match(/[^0-9]/);
            if (verified) {e.preventDefault();}
    });
});

使用Javascript:

function isNumeric(e)
{
    var keynum = (!window.event) ? e.which : e.keyCode;
    return !((keynum == 8 || keynum == undefined || e.which == 0) ? null : String.fromCharCode(keynum).match(/[^0-9]/));
}

当然,这仅适用于纯数字输入(加上退格键,删除键,前进/后退键),但可以轻松更改为包括点和减号.

Answer 7

您可以使用Validation插件及其number()方法.

$("#myform").validate({
  rules: {
    field: {
      required: true,
      number: true
    }
  }
});

Answer 8

不需要数字输入限制的长代码只需尝试此代码.

它还接受有效的int和float两个值.

Javascript方法

onload =function(){ 
  var ele = document.querySelectorAll('.number-only')[0];
  ele.onkeypress = function(e) {
     if(isNaN(this.value+""+String.fromCharCode(e.charCode)))
        return false;
  }
  ele.onpaste = function(e){
     e.preventDefault();
  }
}

<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

jQuery方法

$(function(){

  $('.number-only').keypress(function(e) {
	if(isNaN(this.value+""+String.fromCharCode(e.charCode))) return false;
  })
  .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 />

UPDATE

以上答案适用于大多数常见用例 - 将输入验证为数字.

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

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

$(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 />

Answer 9

下面是我用来实际阻止击键的内容.这只允许数字0-9和小数点.易于实现,而不是很多代码,并且像一个魅力:

<script>
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    } else {
        return true;
    }      
}
</script>

<input value="" onkeypress="return isNumberKey(event)">

Answer 10

作为对此建议的略微改进,您可以使用Validation插件及其number(),数字和范围方法.例如,以下内容可确保您获得0到50之间的正整数:

$("#myform").validate({
  rules: {
    field: {
      required: true,
      number: true,
      digits: true,
      range : [0, 50]
    }
  }
});

Answer 11

你不会看到字母神奇的外观和按键上的消失.这也适用于鼠标粘贴.

$('#txtInt').bind('input propertychange', function () {
    $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

Answer 12

我首先尝试使用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#Example 实例: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解决方案,但希望有人会发现它有用.

Answer 13

感谢Dave Aaron Smith的职位

我编辑了您的答案以接受小数点和数字部分的数字.这项工作对我来说很完美.

$(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right,decimal(.)in number part, decimal(.) in alphabet
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39,110,190];
  // IE doesn't support indexOf
  var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
  // Some browsers just don't raise events for control keys. Easy.
  // e.g. Safari backspace.
  if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
      (49 <= event.which && event.which <= 57) || // Always 1 through 9
      (96 <= event.which && event.which <= 106) || // Always 1 through 9 from number section 
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      (96 == event.which && $(this).attr("value")) || // No 0 first digit from number section
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});

Answer 14

   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();

Answer 15

根据CanIUse截至2015年10月,HTML5支持输入类型编号,全球浏览器支持88%+.

<input type="number" step="0.01" min="0" name="askedPrice" id="askedPrice" />

这不是JQuery相关的解决方案,但优点是在手机上Android键盘将针对输入数字进行优化.

或者,可以使用具有新参数"pattern"的输入类型文本.HTML5规范中的更多细节.

我认为它比jquery解决方案更好,因为在这个问题中提供的jquery解决方案不支持千位​​分隔符.如果你可以使用html5.

JSFiddle:https://jsfiddle.net/p1ue8qxj/