限制文本框仅输入“数字”的最佳方法是什么？
我正在寻找允许小数点的东西。
我看到很多例子。但尚未决定使用哪一个。
来自 Praveen Jeganathan 的更新
没有更多的插件，jQuery 在 v1.7 中添加了自己的 jQuery.isNumeric()。
见：https://stackoverflow.com/a/20186188/66767
【问题讨论】：
标签： jquery validation isnumeric
如果您想限制输入（而不是验证），您可以使用键事件。像这样：
<input type="text" class="numbersOnly" value="" />
还有：
jQuery('.numbersOnly').keyup(function () {
this.value = this.value.replace(/[^0-9\.]/g,'');
});
这会立即让用户知道他们不能输入字母字符等，而不是稍后在验证阶段。
您仍然需要验证，因为输入可能通过使用鼠标剪切和粘贴来填充，或者可能通过可能不会触发关键事件的表单自动完成器来填充。
【讨论】：
$doc.on('keyup blur input propertychange', 'input[name="price"]', function(){$(this).val($(this).val().replace(/[^0-9\.]/g,''));});
有一个新的非常简单的解决方案：
它允许您在文本
<input>上使用任何类型的输入过滤器， 包括各种数字过滤器。这将正确处理 复制+粘贴、拖放、键盘快捷键、上下文菜单操作、 不可键入的键和所有键盘布局。
查看this answer 或亲自尝试on JSFiddle。
我已经使用jquery.numeric 插件成功实现了许多表单。
$(document).ready(function(){
$(".numeric").numeric();
});
此外，这也适用于 textareas！
但是，请注意，Ctrl+A、复制+粘贴（通过上下文菜单）和拖放将不会按预期工作。
随着对 HTML 5 标准的更广泛支持，我们可以对 input 元素使用 pattern 属性和 number 类型来限制仅输入数字。在某些浏览器（尤其是 Google Chrome）中，它也可以限制粘贴非数字内容。有关number 和其他较新输入类型的更多信息，请访问here。
【讨论】：
allowDecimal 选项。源代码非常简单而且写得很好。
type="number"的输入字段时不起作用。
我认为最好的答案是上面的那个。
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, '');
}
});
这样，如果有任何按钮不会导致文本被更改，请忽略它。有了这个，你可以点击箭头并删除而不跳到最后，但它会清除任何非数字文本。
【讨论】：
keypress 可以用来进一步简化这一点，因为显然keyup 和keydown 触发任何键盘键，而keypress only 触发“字符" 键（因此 不 触发箭头和删除键）。请参阅此答案以供参考：stackoverflow.com/a/1367720/1298685
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 已经实现了自己的jQuery.isNumeric()，在 v1.7 中添加。
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);
}
});
【讨论】：
var v = this.value; 将其更改为 var v = this.value.replace(/,/g,''); 。像21,345,67.800 这样的数字太考虑了。
$(document).on('keyup keypress', '#somethingSomething', function(){ var aValue = $(this).val(); if($.isNumeric(aValue) === false){ $(this).val(aValue.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 plugin 及其number() 方法。
$("#myform").validate({
rules: {
field: {
required: true,
number: true
}
}
});
【讨论】：
号码输入限制不需要长代码，试试这个代码。
它还接受有效的 int 和 float 两个值。
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 />更新
以上答案适用于最常见的用例 - 将输入验证为数字。
但下面是特殊用例的代码sn-p
$(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)">
【讨论】：
charCode != 46 来限制小数。很好的答案！
作为to this suggestion 的一个小改进，您可以使用Validation plugin 及其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, ''));
});
【讨论】：
/[^0-9.]/g
我首先尝试使用 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 解决方案，但希望有人会发现这很有用。
【讨论】：
感谢戴夫·亚伦·史密斯的帖子
我编辑了您的答案以接受数字部分的小数点和数字。这项工作非常适合我。
$(".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();
【讨论】：
这个函数做同样的事情，使用了上面的一些想法。
$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);
});
【讨论】：
根据 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/
【讨论】：
/*
这是我的跨浏览器版本
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();
}
}
});
【讨论】：
只需通过 parseFloat() 运行内容。它会在输入无效时返回NaN。
【讨论】：
您可以使用 autoNumeric from decorplanit.com 。它们对数字以及货币、四舍五入等都有很好的支持。
我在 IE6 环境中使用过，只对 css 进行了一些调整，并且相当成功。
例如，可以定义一个 css 类 numericInput，它可以用来用数字输入掩码装饰您的字段。
改编自 autoNumeric 网站：
$('input.numericInput').autoNumeric({aSep: '.', aDec: ','}); // very flexible!
【讨论】：
如果您使用的是 HTML5，则无需费力地执行验证。只需使用 -
<input type="number" step="any" />
step属性允许小数点有效。
【讨论】：
我认为这是解决这个问题的好方法，而且非常简单：
$(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]*$/);
【讨论】：
最好的方法是在失去焦点时检查文本框的内容。
您可以使用正则表达式检查内容是否为“数字”。
或者您可以使用验证插件，它基本上会自动执行此操作。
【讨论】：
检查此查找代码以供数据库使用：
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)'
【讨论】：
这是我刚刚完成的 sn-p（使用 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;
}
});
这段代码：
希望对有需要的人有所帮助。
【讨论】：
在这里找到了一个很好的解决方案http://ajax911.com/numbers-numeric-field-jquery/
我只是根据我的要求将“keyup”更改为“keydown”
【讨论】：
在输入中保持插入符号位置的其他方式：
$(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;
}
});
});
优点：
Plunker：Demo working
【讨论】：
我刚刚发现了一个更好的插件。 给你更多的控制权。 假设您有一个 DOB 字段，您需要它是数字但也接受“/”或“-”字符。
效果很好！
【讨论】：
$(".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;
}
});
【讨论】：