什么是限制“数字”仅输入文本框的最佳方法?
我在找一些允许小数点的东西。
我看到很多这样的例子。但还没决定用哪一种。
Praveen Jeganathan报道
不再有插件,jQuery在1.7版本中实现了自己的jQuery. isnumeric()。 参见:https://stackoverflow.com/a/20186188/66767
什么是限制“数字”仅输入文本框的最佳方法?
我在找一些允许小数点的东西。
我看到很多这样的例子。但还没决定用哪一种。
Praveen Jeganathan报道
不再有插件,jQuery在1.7版本中实现了自己的jQuery. isnumeric()。 参见:https://stackoverflow.com/a/20186188/66767
当前回答
您可以通过添加模式对文本输入使用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]的解决方案,请参阅我的完整答案
其他回答
最好的方法是在文本框失去焦点时检查它的上下文。
可以使用正则表达式检查内容是否为“数字”。
或者你也可以使用Validation插件,它基本上会自动完成。
/* 这是我的跨浏览器版本 如何允许只有数字(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();
}
}
});
你可以使用带有number()方法的Validation插件。
$("#myform").validate({
rules: {
field: {
required: true,
number: true
}
}
});
你可以使用来自decorplanit.com的autoNumeric。它们对数字、货币、舍入等都有很好的支持。
我曾经在IE6环境下使用过,只做了一些css调整,结果还算成功。
例如,可以定义一个css类numericInput,它可以用来用数字输入掩码装饰字段。
改编自autoNumeric网站:
$('input.numericInput').autoNumeric({aSep: '.', aDec: ','}); // very flexible!
更新
有一个新的非常简单的解决方案:
它允许你对文本<input>, 包括各种数字滤波器。这将正确处理 复制+粘贴,拖放,键盘快捷键,上下文菜单操作, 不可输入键,以及所有键盘布局。
看看这个答案或者自己在JSFiddle上试试。
jquery。数字插件
我已经成功地实现了许多形式与jquery。数字插件。
$(document).ready(function(){
$(".numeric").numeric();
});
此外,这也适用于文本区域!
但是,请注意,Ctrl+A,复制+粘贴(通过上下文菜单)和拖放将不能正常工作。
HTML 5
随着对HTML 5标准的广泛支持,我们可以为输入元素使用模式属性和数字类型来限制只输入数字。在一些浏览器(特别是谷歌Chrome)中,它也可以限制粘贴非数字内容。关于number和其他更新的输入类型的更多信息可以在这里找到。