限制文本框的“数字”输入的最佳方法是什么？
我正在寻找允许小数点的东西。
我看到了很多例子。但尚未决定使用哪一个。
来自Praveen Jeganathan的更新
没有更多的插件，jQuery已经在v1.7中添加了自己的jQuery.isNumeric()。
请参阅：https://stackoverflow.com/a/20186188/66767
答案 0 :(得分：284)
如果要限制输入（而不是验证），则可以使用关键事件。像这样的东西：
<input type="text" class="numbersOnly" value="" />
和
jQuery('.numbersOnly').keyup(function () {
this.value = this.value.replace(/[^0-9\.]/g,'');
});
这会立即让用户知道他们不能输入字母字符等，而不是稍后在验证阶段。
您仍然需要验证，因为输入可能是通过使用鼠标剪切和粘贴填充的，也可能是通过可能不会触发键事件的表单自动填充器填充的。
答案 1 :(得分：192)
有一个新的非常简单的解决方案：
它允许您在文本
<input>上使用任何类型的输入过滤器， 包括各种数字过滤器。这将正确处理 复制+粘贴，拖放，键盘快捷键，上下文菜单操作， 不可键入的键和所有键盘布局。
请参阅this answer或亲自尝试on JSFiddle。
我已成功使用jquery.numeric插件实现了许多表单。
$(document).ready(function(){
$(".numeric").numeric();
});
此外，这也适用于textareas！
但是，请注意Ctrl + A，复制+粘贴（通过上下文菜单）和拖放+拖动不按预期工作。
通过更广泛地支持HTML 5标准，我们可以使用pattern属性和number类型来限制input元素，以限制仅限数字输入。在某些浏览器（特别是谷歌浏览器）中，它也可以限制粘贴非数字内容。有关number和其他较新输入类型的详细信息，请参见here。
答案 2 :(得分：100)
我认为最好的答案就是上面提到的那个。
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, '');
}
});
这种方式如果有任何按钮命中不会导致文本被更改只是忽略它。有了它，您可以点击箭头并删除而不跳到最后，但它会清除任何非数字文本。
答案 3 :(得分：54)
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();
}
});
答案 4 :(得分：47)
没有更多插件， 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);
}
});
答案 5 :(得分：34)
上面提到的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]/));
}
当然这仅适用于纯数字输入（加上退格键，删除键，前进/后退键），但可以轻松更改为包含点和减号。
答案 6 :(得分：25)
您可以使用Validation plugin及其number()方法。
$("#myform").validate({
rules: {
field: {
required: true,
number: true
}
}
});
答案 7 :(得分：17)
不需要数字输入限制的长代码只需尝试此代码。
它也接受有效的int＆amp;浮动两个值。
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 />
$(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 />
答案 8 :(得分：14)
以下是我用来阻止击键的内容。这只允许数字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)">
答案 9 :(得分：11)
稍作改进to this suggestion，您可以使用Validation plugin及其number()，digits和range方法。例如，以下内容可确保您获得0到50之间的正整数：
$("#myform").validate({
rules: {
field: {
required: true,
number: true,
digits: true,
range : [0, 50]
}
}
});
答案 10 :(得分：9)
你没有看到字母神奇的外表和onkeydown的消失。这也适用于鼠标粘贴。
$('#txtInt').bind('input propertychange', function () {
$(this).val($(this).val().replace(/[^0-9]/g, ''));
});
答案 11 :(得分：8)
我首先尝试使用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/
您可能有兴趣做的一些事情：
我知道标题要求使用jQuery解决方案，但希望有人会发现它有用。
答案 12 :(得分：6)
感谢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();
}
});
答案 13 :(得分：6)
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();
答案 14 :(得分：5)
根据CanIUse截至2015年10月，HTML5支持输入类型编号，全球浏览器支持88％+。
<input type="number" step="0.01" min="0" name="askedPrice" id="askedPrice" />
这不是JQuery相关的解决方案，但优点是在手机上Android键盘将针对输入数字进行优化。
或者，可以使用带有新参数＆＃34; pattern＆＃34;的输入类型文本。 HTML5规范中的更多细节。
我认为它比jquery解决方案更好，因为在这个问题中提供的jquery解决方案不支持千位分隔符。如果你可以使用html5。
的jsfiddle： https://jsfiddle.net/p1ue8qxj/
答案 15 :(得分：4)
这个功能做同样的事情，使用了上面的一些想法。
$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);
});
答案 16 :(得分：4)
/ *
这是我的跨浏览器版本
How to allow only numeric (0-9) in HTML inputbox using 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();
}
}
});
答案 17 :(得分：3)
您可以使用autoNumeric from decorplanit.com。他们对数字，货币，舍入等都有很好的支持。
我已经在IE6环境中使用过，几乎没有css调整，这是一个合理的成功。
例如，可以定义一个css类numericInput，它可以用来用数字输入掩码装饰你的字段。
改编自autoNumeric网站：
$('input.numericInput').autoNumeric({aSep: '.', aDec: ','}); // very flexible!
答案 18 :(得分：3)
我认为这是解决这个问题的好方法，而且非常简单：
$(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
涵盖的方案
此处大多数类似的建议至少失败了其中之一，或者需要大量代码来涵盖所有这些场景。
home，end和arrow键。delete和backspace用于任何索引。keyup事件。情景失败
0.5开始并且仅删除零将无效。这可以通过将正则表达式更改为/^[0-9]*\.?[0-9]*$/然后添加模糊事件来在文本框以小数点（如果需要）开头时添加0来修复。请参阅此advanced scenario，以便更好地了解如何解决此问题。<强>插件
我创建了这个简单的jquery plugin来简化：
$("input").limitRegex(/^[0-9]+\.?[0-9]*$/);
答案 19 :(得分：2)
如果您使用的是HTML5，则无需花费太多时间来执行验证。只需使用 -
<input type="number" step="any" />
step属性允许小数点有效。
答案 20 :(得分：2)
在这里找到一个很棒的解决方案http://ajax911.com/numbers-numeric-field-jquery/
我只是根据我的要求将“keyup”改为“keydown”
答案 21 :(得分：2)
这是我刚刚完成的一段代码（使用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;
}
});
此代码：
我希望这可以帮助那些有需要的人。
答案 22 :(得分：2)
在输入上保持插入位置的其他方法：
$('.tooltip').addClass('dontshow');
$('#select1').change(function () {
var groupname = $(this).val();
//following line is changed
$('input:radio[name=' + groupname + ']').closest('.tooltip').removeClass('dontshow');
});
优点：
Plunker：Demo working
答案 23 :(得分：2)
检查此查找代码以使用数据库：
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)'
答案 24 :(得分：2)
只需通过parseFloat（）运行内容即可。它将在无效输入上返回NaN。
答案 25 :(得分：2)
最好的方法是在文本框失去焦点时检查文本框的内容。
您可以使用正则表达式检查内容是否为“数字”。
或者您可以使用验证插件，它基本上会自动执行此操作。
答案 26 :(得分：1)
有一个名为Jquery Mask Plugin的漂亮的jquery插件，用于在表单字段和html元素上创建掩码，但您也可以使用它来简单地定义可以在字段内键入的数据类型：
$('.numeric-input').mask('0#');
现在，您的表单字段中只允许使用数字。
答案 27 :(得分：1)
使用Keypress事件
- 阵列方法
var asciiCodeOfNumbers = [48, 49, 50, 51, 52, 53, 54, 54, 55, 56, 57]
$(".numbersOnly").keypress(function (e) {
if ($.inArray(e.which, asciiCodeOfNumbers) == -1)
e.preventDefault();
});
- 直接法
$(".numbersOnly").keypress(function (e) {
if (e.which < 48 || 57 < e.which)
e.preventDefault();
});
答案 28 :(得分：1)
我使用了James Nelli的回答并添加了onpaste =“return false;” （HåvardGeithus）确保只输入整数输入。即使您尝试粘贴，也不允许粘贴。
答案 29 :(得分：1)
这很简单，我们已经有一个javascript内置函数“isNaN”就在那里。
$("#numeric").keydown(function(e){
if (isNaN(String.fromCharCode(e.which))){
return false;
}
});
答案 30 :(得分：1)
我使用该功能，它工作正常
$(document).ready(function () {
$("#txt_Price").keypress(function (e) {
//if the letter is not digit then display error and don't type anything
//if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57))
if ((e.which != 46 || $(this).val().indexOf('.') != -1) && (e.which < 48 || e.which > 57)) {
//display error message
$("#errmsg").html("Digits Only").show().fadeOut("slow");
return false;
}
});
});
答案 31 :(得分：1)
jquery.numeric插件也适用于我。
我唯一不喜欢的是与直觉性有关。在没有任何反馈给用户的情况下，按钮被“禁止”，他们可能会变得偏执或怀疑他的键盘是否坏了。
我added a second callback to the plugin可以对阻止的输入做出简单的反馈：
$('#someInput').numeric(
null, // default config
null, // no validation onblur callback
function(){
// for every blocked keypress:
$(this).effect("pulsate", { times:2 }, 100);
}
);
当然，只是一个例子（使用jQuery UI）。任何简单的视觉反馈都会有所帮助。
答案 32 :(得分：1)
我用过这个，效果很好。
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
答案 33 :(得分：1)
$(".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来使用句点，虽然我不认为这是最好的方法;）
答案 34 :(得分：1)
我刚刚发现了一个更好的插件。 给你更多的控制权。 假设您有一个DOB字段，您需要它是数字，但也接受“/”或“ - ”字符。
效果很好！
答案 35 :(得分：0)
此代码属于在文本框中限制字母，必须在按键事件上输入oly数字验证。希望它对您有所帮助
HTML标签：
<input id="txtPurchaseAmnt" style="width:103px" type="text" class="txt" maxlength="5" onkeypress="return isNumberKey(event);" />
仅限函数编号（键）{
var keycode = (key.which) ? key.which : key.keyCode
if ((keycode > 47 && keycode < 58) || (keycode == 46 || keycode == 8) || (keycode == 9 || keycode == 13) || (keycode == 37 || keycode == 39)) {
return true;
}
else {
return false;
}
}
答案 36 :(得分：0)
允许负数
以下代码也接受负数
<强> HTML
<input type="text" name="myText" />
<强> JS
var pastValue, pastSelectionStart, pastSelectionEnd;
$("input").on("keydown", function() {
pastValue = this.value;
pastSelectionStart = this.selectionStart;
pastSelectionEnd = this.selectionEnd;
}).on("input propertychange", function() {
if ( this.value.length > 0 && $.isNumeric(this.value) == false && this.value != '-' ) {
this.value = pastValue;
this.selectionStart = pastSelectionStart;
this.selectionEnd = pastSelectionEnd;
}
}).on('blur', function(){
if(this.value == '-')
this.value = '';
});
答案 37 :(得分：0)
我有这段代码可以很好地完成这项工作。
var prevVal = '';
$(".numericValue").on("input", function (evt) {
var self = $(this);
if (self.val().match(/^-?\d*(\.(?=\d*)\d*)?$/) !== null) {
prevVal = self.val()
} else {
self.val(prevVal);
}
if ((evt.which != 46 || self.val().indexOf('.') != -1) && (evt.which < 48 || evt.which > 57) && (evt.which != 45 && self.val().indexOf("-") == 0)) {
evt.preventDefault();
}
});
答案 38 :(得分：0)
您可以通过添加模式对文本输入使用HTML5验证。无需使用regex或keyCodes手动验证。
<input type="text" pattern="[0-9.]+" />
$("input[type=text][pattern]").on("input", function () {
if (!this.checkValidity())
this.value = this.value.slice(0, -1);
});
对于输入[type = number]的解决方案，请参阅我的完整答案here
答案 39 :(得分：-3)
请在脚本底部添加：
if(this.value.length == 1 && this.value == 0)
this.value = "";