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

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

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

Praveen Jeganathan的更新

jQuery不再实现任何插件，而是jQuery.isNumeric()在v1.7中实现了自己的插件。参见：https : //stackoverflow.com/a/20186188/66767

更新资料

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

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

查看此答案，或在JSFiddle上尝试一下。

jquery.numeric插件

我已经使用jquery.numeric插件成功实现了多种形式。

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

而且这也适用于textareas！

但是，请注意，Ctrl + A，复制+粘贴（通过上下文菜单）和拖动+拖放将无法正常工作。

HTML 5

随着对HTML 5标准的更广泛支持，我们可以对元素使用pattern属性和number类型input来限制仅数字输入。在某些浏览器（尤其是Google Chrome）中，它还可以限制粘贴非数字内容。有关更多信息number以及其他更新的输入类型，请参见此处。

如果要限制输入（而不是验证），则可以使用按键事件。像这样的东西：

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

和：

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

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

您仍然需要进行验证，因为输入内容可能是通过使用鼠标剪切和粘贴或可能不触发按键事件的表单自动完成程序填充的。

我认为最好的答案就是上述方法。

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, '');
    }
});

这样，如果有任何按钮点击不会导致文本更改，请忽略它。有了它，您可以点击箭头并删除而不会跳到最后，但是它会清除所有非数字文本。

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

不再有插件，jQuery已实现了v1.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);
   }
});

上面提到的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]/));
}

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

您可以使用Validation插件及其number（）方法。

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

无需使用长代码来限制号码输入，只需尝试使用此代码即可。

它还接受有效的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 />

更新

以上答案适用于最常见的用例-验证输入是否为数字。

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

• 允许负数
• 显示无效的击键，然后再将其删除。

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

下面是我用来实际阻止按键的内容。这仅允许数字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)">

作为对此建议的略微改进，您可以使用Validation插件及其number（），digits和range方法。例如，下面的代码确保您获得0到50之间的正整数：

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

您不会在按键时看到字母的神奇外观和消失。这也适用于鼠标粘贴。

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

我首先尝试使用jQuery解决此问题，但对于在键盘上被删除之前实际上出现在输入字段中的多余字符（非数字）感到不满意。

寻找其他解决方案，我发现了这一点：

整数（非负数）

<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解决方案，但希望有人无论如何都会发现它有用。

感谢您的帖子戴夫·亚伦·史密斯

我修改了您的答案，以接受数字部分中的小数点和数字。这项工作对我来说很完美。

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

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

根据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/

此功能执行相同的操作，使用上面的一些想法。

$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等没有问题。

/ *这是我的跨浏览器版本， 如何使用jQuery在HTML输入框中仅允许数字（0-9）？
* /

$("#inputPrice").keydown(function(e){
    var keyPressed;
    if (!e) var e = window.event;
    if (e.keyCode) keyPressed = e.keyCode;
    else if (e.which) keyPressed = e.which;
    var hasDecimalPoint = (($(this).val().split('.').length-1)>0);
    if ( keyPressed == 46 || keyPressed == 8 ||((keyPressed == 190||keyPressed == 110)&&(!hasDecimalPoint && !e.shiftKey)) || keyPressed == 9 || keyPressed == 27 || keyPressed == 13 ||
             // Allow: Ctrl+A
            (keyPressed == 65 && e.ctrlKey === true) ||
             // Allow: home, end, left, right
            (keyPressed >= 35 && keyPressed <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (e.shiftKey || (keyPressed < 48 || keyPressed > 57) && (keyPressed < 96 || keyPressed > 105 )) {
                e.preventDefault();
            }
        }

  });

只需通过parseFloat（）运行内容即可。它将NaN在输入无效时返回。

您可以从decorplanit.com使用autoNumeric。它们对数字，货币，舍入等都有很好的支持。

我已经在IE6环境中使用过，几乎没有CSS调整，这是一个合理的成功。

例如，numericInput可以定义一个css类，并将其用于用数字输入掩码修饰字段。

改编自autoNumeric网站：

$('input.numericInput').autoNumeric({aSep: '.', aDec: ','}); // very flexible!

我认为这是解决此问题的好方法，而且非常简单：

$(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. 只允许1个小数点。
2. 允许home，end和arrow键。
3. 允许delete和backspace用于任何索引。
4. 允许在任何索引处进行编辑（只要输入与正则表达式匹配）。
5. 允许ctrl + v和shift + insert作为有效输入（与右键单击+粘贴相同）。
6. 因为keyup未使用事件，所以不会闪烁文本值。
7. 输入无效后恢复选择。

方案失败

• 以0.5零开头和仅删除零将不起作用。可以通过将正则表达式更改为/^[0-9]*\.?[0-9]*$/，然后0在文本框以小数点开头（如果需要）时添加一个模糊事件来添加前缀a 来解决此问题。请参阅此高级方案 ，以更好地了解如何解决此问题。

插入

我创建了这个简单的jquery插件，以使其更容易：

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

最好的方法是在失去焦点时检查文本框的位置。

您可以使用正则表达式检查内容是否为“数字”。

或者，您可以使用Validation插件，该插件基本上会自动执行此操作。

检查此查找代码以供数据库使用：

function numonly(root){
    >>var reet = root.value;
    var arr1 = reet.length;
    var ruut = reet.charAt(arr1-1);
    >>>if (reet.length > 0){
        var regex = /[0-9]|\./;
        if (!ruut.match(regex)){
            var reet = reet.slice(0, -1);
            $(root).val(reet);
        >>>>}
    }
}
//Then use the even handler onkeyup='numonly(this)'

这是我刚刚完成的代码段（使用Peter Mortensen / Keith Bentrup的部分代码），用于在文本字段上进行整数百分比验证（需要jQuery）：

/* This validates that the value of the text box corresponds
 * to a percentage expressed as an integer between 1 and 100,
 * otherwise adjust the text box value for this condition is met. */
$("[id*='percent_textfield']").keyup(function(e){
    if (!isNaN(parseInt(this.value,10))) {
        this.value = parseInt(this.value);
    } else {
        this.value = 0;
    }
    this.value = this.value.replace(/[^0-9]/g, '');
    if (parseInt(this.value,10) > 100) {
        this.value = 100;
        return;
    }
});

这段代码：

• 允许使用主数字键和数字小键盘。
• 验证以排除Shift数字字符（例如，＃，$，％等）
• 将NaN值替换为0
• 替换为高于100的100个值

我希望这对有需要的人有所帮助。

在这里找到了一个很好的解决方案http://ajax911.com/numbers-numeric-field-jquery/

我只是根据需要将“ keyup”更改为“ keydown”

如果您使用的是HTML5，则无需花太多精力进行验证。只需使用-

<input type="number" step="any" />

step属性允许小数点有效。

将插入符号保持在输入上的其他方式：

$(document).ready(function() {
  $('.numbersOnly').on('input', function() {
    var position = this.selectionStart - 1;

    fixed = this.value.replace(/[^0-9\.]/g, '');  //remove all but number and .
    if(fixed.charAt(0) === '.')                  //can't start with .
      fixed = fixed.slice(1);

    var pos = fixed.indexOf(".") + 1;
    if(pos >= 0)
      fixed = fixed.substr(0,pos) + fixed.slice(pos).replace('.', '');  //avoid more than one .

    if (this.value !== fixed) {
      this.value = fixed;
      this.selectionStart = position;
      this.selectionEnd = position;
    }
  });
});

优点：

1. 用户可以使用箭头键，退格，删除...
2. 当您要粘贴数字时有效

Plunker：演示工作

我刚刚找到了一个更好的插件。给您更多的控制权。假设您在DOB字段中需要数字，但也可以接受“ /”或“-”字符。

效果很好！

在http://itgroup.com.ph/alphanumeric/上进行检查。

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

这段代码对我来说效果很好，我只需要在controlKeys数组中添加46个即可使用句点，尽管我认为这不是最好的方法;）

我用这个，效果很好。

ini=$("#id").val();
a=0;
$("#id").keyup(function(e){
    var charcode = (e.which) ? e.which : e.keyCode;
    // for decimal point
    if(!(charcode===190 || charcode===110))
    {           // for numeric keys andcontrol keys
        if (!((charcode>=33 && charcode<=57) || 
        // for numpad numeric keys
        (charcode>=96 && charcode<=105) 
        // for backspace
        || charcode==8)) 
        {
            alert("Sorry! Only numeric values allowed.");
            $("#id").val(ini);
        }
        // to include decimal point if first one has been deleted.
        if(charcode===8)
        {
            ini=ini.split("").reverse();
            if(ini[0]==".")
            a=0;                 
        }
    }
    else
    {
        if(a==1)
        {
            alert("Sorry! Second decimal point not allowed.");
            $("#id").val(ini);
        }
        a=1;
    }
    ini=$("#id").val();
});


find keycodes at http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

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

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