jQuery：什么是限制“数字”的最佳方式 – 只input文本框？ （允许小数点）

限制“数字”的最佳方法是只input文本框？

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

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

Praveen Jeganathan最新消息

没有更多的插件，jQuery已经实现了自己的v1.7中添加的jQuery.isNumeric（）。 请参阅： https ： //stackoverflow.com/a/20186188/66767

Answer 1

我已经用jquery.numeric插件成功实现了很多forms。

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

此外这也适用于textareas！

编辑： – 更广泛的支持新的HTML标准，我们可以使用pattern属性和numbertypes的input元素来限制数字只有input。 它也可以限制粘贴非数字内容。 关于number和其他更新的inputtypes的更多信息可以在这里find 。

Answer 2

如果你想限制input（而不是validation），你可以使用关键事件。 像这样的东西：

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

和：

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

这会立即让用户知道他们不能在validation阶段input字母等字符，而不是稍后input。

您仍然需要validation，因为input可能是通过剪切并粘贴鼠标或可能通过可能不触发按键事件的表单自动完成器来填充的。

Answer 3

我认为最好的答案就是上面的这个。

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

但我同意，箭头键和删除button将光标移动到string的末尾是有点痛苦的（因为它在testing中被踢回了我）

我添加了一个简单的改变

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

这样如果有任何button命中不会导致文本被改变就忽略它。 有了这个，你可以打箭头和删除而不跳到最后，但它清除任何非数字文本。

Answer 4

jquery.numeric插件有一些我通知作者的错误。 它允许在Safari和Opera中有多个小数点，并且不能在Opera中键入退格键，箭头键或其他几个控制字符。 我需要正整数input，所以最后我只写了自己的东西。

 $(".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. // eg Safari backspace. if (!event.which || // Control keys in most browsers. eg 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 )

确定其参数是否是一个数字。

样品结果

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

当然这是纯粹的数字input（加退格，删除，前进/后退键），但可以很容易地改变，包括点和减号字符。

Answer 7

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

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

Answer 8

数字input限制的长码不需要尝试这个代码。

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

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

你没有看到字母神奇的外观和失踪的关键。 这也适用于鼠标粘贴。

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

Answer 11

作为这个build议的一个细微的改进，你可以使用validation插件的号码（） ， 数字和范围方法。 例如，以下内容可确保您获得0到50之间的正整数：

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

Answer 12

我第一次尝试使用jQuery来解决这个问题，但是我并不满意在input字段中实际出现的不需要的字符（非数字），然后在keyup上被移除。

寻找其他解决scheme，我发现这一点：

整数（非负）

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

其他自定义

• 为了让更多的符号被input，只需将它们添加到充当基本字符代码filter的正则expression式中即可。
• 要实现简单的上下文限制，请查看input字段的当前内容（状态）（oToCheckField.value）

有些事情你可能有兴趣做：

• 只允许一个小数点
• 只有位于string的起始位置时才允许减号。 这将允许负数。

缺点

• 插入位置在function内部不可用。 这大大减less了你可以实现的上下文限制（例如，没有两个相等的连续符号）。 不知道访问它的最好方法是什么。

我知道标题要求jQuery解决scheme，但希望有人会发现这有用。

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. // eg Safari backspace. if (!event.which || // Control keys in most browsers. eg 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(); } } }); }); }; 

并将其应用于所有您想要的input：

 $('selector').ForceNumericOnly(); 

Answer 15

截至2015年10月，根据CanIUse，HTML5支持全球浏览器支持88％+的inputtypes编号。

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

这不是JQuery相关的解决scheme，但优点是在手机Android键盘将优化input数字。

或者，可以使用带有新参数“模式”的inputtypes文本。 HTML5规范中的更多细节。

我认为这是比jquery解决scheme，因为在这个问题提供的jquery解决scheme不支持千位​​分隔符。 如果你可以使用html5。

JSFiddle： https ：//jsfiddle.net/p1ue8qxj/

Answer 16

这个function做同样的事情，使用上面的一些想法。

 $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等

Answer 17

您可以使用decorplanit.com中的autoNumeric 。 他们有一个很好的数字支持，以及货币，四舍五入等。

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

例如，可以定义一个css类numericInput ，它可以用数字input掩码来修饰你的字段。

改编自autoNumeric网站：

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

Answer 18

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

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

涉及的情景

这里大多数类似的build议至less会失败其中之一，或者需要大量代码才能涵盖所有这些情况。

1. 只允许1个小数点。
2. 允许home ， end和arrow键。
3. 允许在任何索引处使用delete和backspace 。
4. 允许在任何索引编辑（只要input匹配正则expression式）。
5. 允许Ctrl + V和Shift +插入有效的input（右键单击+粘贴相同）。
6. 不使用keyup事件不闪烁的文本值。
7. 恢复无效input后的select。

情况失败

• 从0.5开始，只删除零将不起作用。 这可以通过将正则expression式更改为/^[0-9]*\.?[0-9]*$/ ，然后添加一个模糊事件来预先设置0当文本框以小数点开始时（如果需要） 。 看到这个高级的场景 ，以更好地了解如何解决这个问题。

插入

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

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

Answer 19

/ *这是我的跨浏览器版本的如何只允许数字（0-9）在HTMLinput框使用jQuery？
* /

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

Answer 20

最好的办法是在失去焦点时检查文本框的内容。

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

或者你可以使用Validation插件，这基本上是自动完成的。

Answer 21

检查数据库使用的查找代码：

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

Answer 22

这是我刚刚完成的一个片段（使用Peter Mortensen / Keith Bentrup的一部分代码）在textfield上进行整数百分比validation（需要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; } }); 

此代码：

• 允许使用主数字键和数字小键盘。
• validation以排除Shift-numeric字符（例如＃，$，％等）
• 将NaN值replace为0
• 取代100个高于100的值

我希望这可以帮助那些有需要的人。

Answer 23

在这里find一个很好的解决schemehttp://ajax911.com/numbers-numeric-field-jquery/

我只是按照我的要求把“keyup”改成了“keydown”

Answer 24

其他方法来保持input上的插入位置：

 $(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： 演示工作

Answer 25

我刚刚发现了一个更好的插件。 给你更多的控制。 假设你有一个DOB字段，你需要它是数字的，但也接受“/”或“ – ”字符。

这很好用！

查看http://itgroup.com.ph/alphanumeric/ 。

Answer 26

只需通过parseFloat（）运行内容。 它将在无效input中返回NaN 。

Answer 27

  $(".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. // eg Safari backspace. if (!event.which || // Control keys in most browsers. eg 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来使用句点，尽pipe我不认为这是最好的方法;）

Answer 28

我用这个，效果很好..

 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 

Answer 29

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

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

Answer 30

jquery.numeric插件也适用于我。

我唯一不喜欢的是直觉。 按键被“禁止”而没有任何反馈给用户，他们可能会偏执或怀疑他的键盘是否坏了。

我向插件添加了第二个callback函数 ，以便对被阻止的input做出简单的反馈：

 $('#someInput').numeric( null, // default config null, // no validation onblur callback function(){ // for every blocked keypress: $(this).effect("pulsate", { times:2 }, 100); } ); 

只是一个例子（使用jQuery UI），当然。 任何简单的视觉反馈都会有帮助