我正在创建一个网页,其中我有一个输入文本字段,我想只允许数字字符,如(0,1,2,3,4,5…9)0-9。
我如何使用jQuery做到这一点?
我正在创建一个网页,其中我有一个输入文本字段,我想只允许数字字符,如(0,1,2,3,4,5…9)0-9。
我如何使用jQuery做到这一点?
当前回答
使用JavaScript函数isNaN,
if (isNaN($('#inputid').val()))
if (isNaN(document.getElementById('inputid').val()))
if (isNaN(document.getElementById('inputid').value))
更新: 这里有一篇很好的文章谈论它,但使用jQuery:限制输入在HTML文本框的数值
其他回答
使用JavaScript函数isNaN,
if (isNaN($('#inputid').val()))
if (isNaN(document.getElementById('inputid').val()))
if (isNaN(document.getElementById('inputid').value))
更新: 这里有一篇很好的文章谈论它,但使用jQuery:限制输入在HTML文本框的数值
这个答案是完美的,但我们甚至可以通过将其与jQuery结合使用来使其更好、更强大。验证插件。
通过使用number()方法,我们可以开发如下内容:
$('.numberOnly').keydown(function (event) {
if ((!event.shiftKey && !event.ctrlKey && !event.altKey) &&
((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)))
// 0-9 or numpad 0-9, disallow shift, ctrl, and alt
{
// check textbox value now and tab over if necessary
}
else if (event.keyCode != 8 && event.keyCode != 13 && event.keyCode != 46 && event.keyCode != 37
&& event.keyCode != 39 && event.keyCode != 9 && event.keyCode != 109
&& event.keyCode != 189 && event.keyCode != 110 && event.keyCode != 190)
// not backsapce (8), enter (13), del (46), left arrow (37), right arrow (39), tab (9), negetive sign (- : 109, 189), or point (. : 110, 190)
{
event.preventDefault();
}
// else the key should be handled normally
});
// _____________________________________________
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
// _____________________________________________
$(document).ready(function(){
$('#myFormId').validate({
rules: {
field: {
required: true,
number: true
}
}
});
});
因此,任何文本框在“#myFormId”形式,与“numberOnly”类,只接受数字,包括小数,浮点数,甚至负数。瞧:)
PS:在我的情况下,由于某种原因,我使用jQuery.validator.addMethod()而不是.validate():
jQuery.validator.addMethod("numberOnly", function (value, element) {
var result = !isNaN(value);
return this.optional(element) || result;
}, jQuery.format("Please enter a valid number."));
(它在我的ASP。NET MVC 3项目+不显眼的JavaScript验证,hoooooooooray !
$(document).ready(function() {
$("#txtboxToFilter").keydown(function(event) {
// Allow only backspace and delete
if ( event.keyCode == 46 || event.keyCode == 8 ) {
// let it happen, don't do anything
}
else {
// Ensure that it is a number and stop the keypress
if (event.keyCode < 48 || event.keyCode > 57 ) {
event.preventDefault();
}
}
});
});
来源:http://snipt.net/GerryEng/jquery-making-textfield-only-accept-numeric-values
我把所有的答案结合在一起,得出了以下代码:
jQuery('#input_id', function(e){
// Allow: backspace, delete, tab, escape, enter
if (jQuery.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode === 65 && e.ctrlKey === true) ||
// Allow: Ctrl+C
(e.keyCode === 67 && e.ctrlKey === true) ||
// Allow: Ctrl+X
(e.keyCode === 88 && e.ctrlKey === true) ||
// Disallow several dots (allow 190 only if no dots found)
(e.keyCode === 190 && jQuery(this).val().indexOf('.') == -1) ||
// Bug in some Android devices where it is always 229
(e.keyCode === 229) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 40)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});
此外,表单应该有autocomplete="off"。如果没有这个选项,你可能会在移动设备上遇到自动补全算法的问题。
我在我们的内部common js文件中使用了这个。我只是将类添加到需要这种行为的任何输入中。
$(".numericOnly").keypress(function (e) {
if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return false;
});