小开

你可以将验证插件和它的数量()方法一起使用。

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

小开

最好的方法是在文本框失去焦点时检查它的上下文。

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

或者你也可以使用Validation插件，它基本上会自动完成。

小开

最佳答案

更新

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

它允许你对文本使用任何类型的输入过滤器。包括各种数字滤波器。这将正确处理复制+粘贴，拖放，键盘快捷键，上下文菜单操作，

参见这个答案或自己尝试在JSFiddle。

jquery。数字插件

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

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

此外，这也适用于文本区域!

然而，请注意，Ctrl+A，复制+粘贴(通过上下文菜单)和拖放将不正常工作。

HTML 5

随着对HTML 5标准的广泛支持，我们可以为pattern元素使用pattern属性和number类型来限制只输入数字。在一些浏览器(特别是谷歌Chrome)中，它也可以限制粘贴非数字内容。有关number和其他更新的输入类型的更多信息，请参见在这里。

小开

如果希望限制输入(而不是验证)，可以使用键事件。就像这样:

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

和:

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

这将立即让用户知道他们不能输入alpha字符等，而不是在验证阶段之后。

您仍然需要验证，因为输入可能是通过鼠标剪切和粘贴来填充的，也可能是通过表单自动补全程序填充的，这可能不会触发键事件。

小开

只需通过parseFloat()运行内容。它将在无效输入时返回NaN。

小开

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

效果很好!

去http://itgroup.com.ph/alphanumeric/看看吧。

小开

jquery。数值插件有一些bug，我通知了作者。它允许在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();
}
});

小开

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

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

小开

    $(".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来使用句号，虽然我不认为是最好的方法;)

小开

这是我刚刚完成的一个代码片段(使用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的值

我希望这能帮助到那些需要帮助的人。

小开

请在脚本底部添加:

if(this.value.length == 1 && this.value == 0)
this.value = "";

小开

戴夫·亚伦·史密斯，谢谢你的帖子

我编辑了你的答案，接受小数点和数字的数字部分。这个工作非常适合我。

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

小开

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

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

小开

你可以使用autoNumeric来自decorplanit.com。它们对数字、货币、舍入等都有很好的支持。

我曾经在IE6环境下使用过，只做了一些css调整，结果还算成功。

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

改编自autoNumeric网站:

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

小开

/ * 这是我的跨浏览器版本如何允许只有数字(0-9)在HTML输入框使用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();
}
}


});

小开

我用了这个，效果很好。

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

小开

作为一个轻微的改进对于这个建议，你可以使用验证插件和它的数量()，数字和范围方法。例如，下面的语句确保你得到一个0到50之间的正整数:

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

小开

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

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

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

小开

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

我只是按照我的要求把“键上”改为“键下”

小开

下面是我用来阻止击键的。这只允许数字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)">

小开

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

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

小开

你看不到字母的神奇出现和消失的关键下来。这也适用于鼠标粘贴。

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

小开

jquery.numeric插件也很适合我。

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

我为插件添加了第二个回调使简单的反馈阻塞输入可能:

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

当然，这只是一个示例(使用jQuery UI)。任何简单的视觉反馈都有帮助。

小开

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

当然，这只适用于纯数字输入(加上退格键、删除键、前进/后退键)，但可以很容易地更改为包含点和减号字符。

小开

没有更多的插件，jQuery已经实现了在1.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);
}
});

小开

此代码属于文本框中的字母限制，在按键事件时必须输入唯一数字验证。希望对你有所帮助

HTML标记:

<input id="txtPurchaseAmnt" style="width:103px" type="text" class="txt" maxlength="5" onkeypress="return isNumberKey(event);" />

函数onlyNumbers(key) {

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

小开

我使用这个函数，它工作得很好

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

小开

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

小开

我第一次尝试用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解决方案，但希望有人会发现这是有用的。

小开

如果你使用的是HTML5，你就不需要花大力气去执行验证。只要用——

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

step属性允许小数点有效。

小开

我使用了James Nelli的答案，并添加了onpaste="return false;"(Håvard Geithus)以确保输入中只输入整数。即使你尝试粘贴，它也不会允许。

小开

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

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

失败场景

从0.5开始并只删除0将不起作用。这可以通过将正则表达式更改为/^[0-9]*\.?[0-9]*$/，然后在文本框以小数点开始时(如果需要)添加一个模糊事件以0开头来解决。关于如何修复这个问题，请参阅高级场景。

插件

我创建了这个简单的jquery插件来简化:

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

小开

不需要长代码的数字输入限制，只是尝试这段代码。

它还接受有效的int &浮动两个值。

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

小开

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

小开

有一个很好的jquery插件叫做Jquery蒙版插件，旨在使蒙版的表单字段和html元素，但你也可以用它来简单地定义什么类型的数据可以输入在一个字段:

$('.numeric-input').mask('0#');

现在只有数字将被允许在您的表单字段。

小开

保持插入符号在输入中的位置的其他方法:

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

优点:

用户可以使用方向键、退格键、删除键、…
当你想要粘贴数字的时候就可以了

砰砰作响:演示工作

小开

使用按键事件

数组的方法

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

小开

允许负数也

下面的代码也接受负数

超文本标记语言

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

小开

我有一段代码，它很好地完成了这项工作。

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

小开

您可以通过添加模式对文本输入使用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]的解决方案，请参阅我的完整答案在这里

jQuery:限制文本框只输入“number”的最好方法是什么?(允许使用小数点)

更新