jQuery：如何限制文本框只能输入“数字”？（允许小数点）

Question

如何最好地限制文本框中只能输入“数字”？

我想要允许输入小数点。

我看到很多例子，但还没有决定要使用哪个。

Praveen Jeganathan 的更新

不再需要插件，jQuery 已经在 v1.7 中实现了自己的 jQuery.isNumeric()。 请见：https://dev59.com/q3NA5IYBdhLWcg3wn_Q1#20186188

- wenbert

---

这是一个基于观点的问题，但非常有用。应该允许基于观点的问题存在。寻求此信息的人只需要知道这只是基于观点的答案即可。一个标签就足够了。 - Thiago C. S Ventura

Answer 1

如果你想限制输入（而不是验证），可以使用按键事件。可以像这样实现：

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

并且：

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

这样做可以立即让用户知道他们不能输入字母等内容，而不是在验证阶段后才发现。

尽管如此，您仍应进行验证，因为输入可能是通过鼠标剪切和粘贴填充的，或者可能是通过表单自动完成程序填充的，这些可能不会触发键事件。

- Keith Bentrup

---

+1 - 我本来也想建议这个。值得注意的是，这种验证方式可以在每次键入时进行，而不必等到最后。我想补充的是，需要某种形式的警告提示用户正在输入的内容被拒绝了。仅仅不显示字母会让太多人认为他们的键盘坏了。也许可以微妙地改变背景或边框颜色……只要用户知道你的应用程序确实在做些什么就行了。 - nickf

同意。我有一个示例网站，网址为http://www.tarbuilders.com/。如果您单击“联系人”，表格会实时检查用户输入是否有效，如果有效则会出现绿色边框和勾号。无效则会显示红色和“x”。 - Keith Bentrup

查看这个答案以解决箭头键问题。 - Hanna

请注意，您仍然可以通过右键单击> 粘贴来粘贴字符和字母。 修复此问题的简单方法是： $doc.on('keyup blur input propertychange', 'input[name="price"]', function(){$(this).val($(this).val().replace(/[^0-9\.]/g,''));}); - Rens Tillmann

如果我输入数字，例如“123”，然后按下字母键，例如“a”，它会清空输入... - candlejack

不错，但是它接受多个小数分隔符。 - Souvik Ghosh

Answer 2

更新

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

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

请参见此答案或自行尝试在JSFiddle上进行测试。

jquery.numeric插件

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

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

而且这也适用于文本区域！

然而，请注意Ctrl+A、复制+粘贴（通过上下文菜单）和拖放不会按预期工作。

HTML 5

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

- TheVillageIdiot

---

该插件不允许在Opera浏览器中使用退格键。 - Darryl Hein

@Darryl 这个源代码只有几十行，所以我相信修改它以允许这个是微不足道的。我刚刚发现了这个插件并将其修改，以便现在有一个“allowDecimal”的选项，每当我只想允许整数值时使用...源代码非常简单而且写得很好。 - Earlz

当将文本复制粘贴到 type="number" 的输入字段中时，此方法无法正常工作。 - Tallmaris

@Tallmaris，这确实是一个非常古老的问题和答案。HTML 已经发生了很多变化，应该予以考虑。 - TheVillageIdiot

嗨@TheVillageIdiot，你是对的。我在评论中并不想听起来粗鲁（可能有点干巴巴的），事实上，我看到了一些最近的评论，所以我只是想澄清，目前这可能不是解决问题的最佳方案。 - Tallmaris

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

如果有任何不会导致文本更改的按钮被按下，就忽略它。这样，您就可以点击箭头和删除而不跳到末尾，但会清除任何非数字文本。

- James Nelli

---

为了更好的性能，应该创建一个变量来保存替换后的结果，而不是运行两次。 - DriverDan

为了进一步简化，可以使用 keypress，因为显然 keyup 和 keydown 会触发任何键盘键，而 keypress 仅触发“字符”键（因此不会触发箭头和删除键）。 查看此答案以供参考：https://dev59.com/43M_5IYBdhLWcg3wdy7z#1367720 - Ian Campbell

它正在接受多个小数。如何只接受一个小数。我已经应用于金额文本字段。它也可以接受12.5.6。如何限制为一个点。 - niru dyogi

@IanCampbell keypress 意味着您可以输入一个不会被删除的字符，但是这种方法不起作用。KeyDown 执行相同的操作。我只能使用 Keyup 使其正常工作。 - nickdnk

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

- Dave Aaron Smith

---

使用此代码无法输入0。在Mac上测试了Chrome和FF。 - jaredstenquist

我更新了代码以接受0数字（48 == event.which && ($(this).val() > 0 )) || // 第一个数字不能为0 - aljordan82

这是一个很好的解决方案，但缺少小数点，请添加 （46 == event.which &&！($(this).val().includes("."))) || - DiamondDrake

完全无法输入0。 - PJ7

Answer 5

不再需要插件，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);
   }
});

- Praveen

---

+1 不需要插件。我想要进行一些微小的修改，以允许千位分隔符。将 var v = this.value; 替换为 var v = this.value.replace(/,/g,'');。数字如 21,345,67.800 也应被考虑在内。 - maan81

有人知道这个如何检查数字吗？它使用按键码还是正则表达式？如果考虑不同的键盘布局，这很重要。 - Christopher Grigg

这很接近正确答案。但如果您按住一个字符键，它不会正确地运行检查。该字符将“运行”。相反，请尝试使用以下代码：$(document).on('keyup keypress', '#somethingSomething', function(){ var aValue = $(this).val(); if($.isNumeric(aValue) === false){ $(this).val(aValue.slice(0,-1)); } }); - Gwi7d31

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]/));
}

当然，这只适用于纯数字输入（加上退格、删除、前后键），但可以轻松地更改为包括小数点和负号字符。

- Mike Gibbs

---

不允许使用数字键盘 - Graham

Answer 7

你可以使用验证插件和它的number()方法。 Validation plugin，number()方法。

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

- Dror

---

FYI - number() 不支持指数形式的数字。 - ScottLenart

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

更新

上述答案适用于大多数常见情况下 - 验证输入是否为数字。

但以下是用于特殊情况的代码片段

• 允许负数
• 显示无效按键后再删除它。

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

- vinayakj

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)">

- kaleazy

---

如果有人想知道，您可以通过从if语句中删除charCode != 46来限制小数位。非常好的答案！ - Gaʀʀʏ

没错，我把 charCode != 46 给移除了，以便跳过小数部分。谢谢 kaleazy，你的答案对我非常有用。 - msqar

这个解决方案不好，因为它没有考虑到退格，箭头，控制键和其他必要的按键。 - DriverDan

我刚刚发布了一个类似的解决方案，但也处理了退格、箭头，并且没有使用硬编码键码。在这里查看：https://dev59.com/q3NA5IYBdhLWcg3wn_Q1#23468513 - Håvard Geithus

Answer 10

作为对该建议的微小改进，您可以使用验证插件及其number()、digits和range方法。例如，以下代码可确保您获取一个介于0和50之间的正整数：

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

- Brad Parks