如何只允许使用jQuery的HTML输入框中的数字(0-9)？(How to allow only numeric (0-9) in HTML inputbox using jQuery?)
我正在创建一个网页，其中有一个输入文本字段，其中我只允许数字字符(0,1,2,3,4,5 ... 9)0-9。
我如何使用jQuery？
I am creating a web page where I have an input text field in which I want to allow only numeric characters like (0,1,2,3,4,5...9) 0-9.
How can I do this using jQuery?
原文：https://stackoverflow.com/questions/995183
更新时间：2019-11-23 05:22
最满意答案
看看这个插件(TexoTela jQuery数字) 。 这个(jStepper)是另一个。
这是一个链接，如果你想自己建立它。
$(document).ready(function() {
$("#txtboxToFilter").keydown(function (e) {
// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Allow: Ctrl+A, Command+A
(e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) ||
// Allow: home, end, left, right, down, up
(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();
}
});
});
注意：如果您的网页使用HTML5，您可以使用内置的并使用min和max属性来控制最小和最大值。
以下是最小化的，并允许使用CTRL + x ， CTRL + c和CTRL + v
$(function() {
$('#staticParent').on('keydown', '#child', function(e){-1!==$.inArray(e.keyCode,[46,8,9,27,13,110,190])||/65|67|86|88/.test(e.keyCode)&&(!0===e.ctrlKey||!0===e.metaKey)||35<=e.keyCode&&40>=e.keyCode||(e.shiftKey||48>e.keyCode||57e.keyCode||105
})
jQuery
Note: This is an updated answer. Comments below refer to the old version which messed around with keycodes.
The inputFilter plugin from the below script allows you to use any kind of input filter on a text , including various numeric filters. This will correctly handle Copy+Paste, Drag+Drop, keyboard shortcuts, context menu operations, non-typeable keys, the cursor position, all keyboard layouts and all browsers since IE 9. Note that you still must do server side validation!
Try it yourself on JSFiddle.
// Restricts input for each element in the set of matched elements to the given inputFilter.
(function($) {
$.fn.inputFilter = function(inputFilter) {
return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() {
if (inputFilter(this.value)) {
this.oldValue = this.value;
this.oldSelectionStart = this.selectionStart;
this.oldSelectionEnd = this.selectionEnd;
} else if (this.hasOwnProperty("oldValue")) {
this.value = this.oldValue;
this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
}
});
};
}(jQuery));
Usage:
// Restrict input to digits by using a regular expression filter.
$("#myTextBox").inputFilter(function(value) {
return /^\d*$/.test(value);
});
Some input filters you might want to use:
Integer values (both positive and negative):
/^-?\d*$/.test(value)
Integer values (positive only):
/^\d*$/.test(value)
Integer values (positive and up to a particular limit):
/^\d*$/.test(value) && (value === "" || parseInt(value) <= 500)
Floating point values (allowing both . and , as decimal separator):
/^-?\d*[.,]?\d*$/.test(value)
Currency values (i.e. at most two decimal places):
/^-?\d*[.,]?\d{0,2}$/.test(value)
Hexadecimal values:
/^[0-9a-f]*$/i.test(value)
Pure JavaScript
jQuery isn't actually needed for this, you can do the same thing with pure JavaScript as well. See this answer or try it yourself on JSFiddle.
HTML 5
HTML 5 has a native solution with (see the specification), but note that browser support varies:
Most browsers will only validate the input when submitting the form, and not when typing.
Most mobile browsers don't support the step, min and max attributes.
Chrome (version 71.0.3578.98) still allows the user to enter the characters e and E into the field. Also see this question.
Firefox (version 64.0) and Edge (EdgeHTML version 17.17134) still allow the user to enter any text into the field.
Try it yourself on w3schools.com.
More complex validation options
If you want to do some other validation bits and pieces, this could be handy:
相关问答
is_numeric()测试一个值是否是一个数字。 虽然它不一定是一个整数 - 它可以是十进制数或科学记数法中的数字。 你给出的preg_match()例子只检查一个值是否包含0到9的数字; 它们中的任意数量，以及任何顺序。 请注意，您给出的正则表达式也不是一个完美的整数检查器，就像你写的那样。 它不允许否定; 它确实允许一个零长度的字符串(即根本没有数字，这大概不应该是有效的？)，并且它允许该数字具有任意数量的前导零，这也可能不是预期的。 [编辑] 根据您的评论，更好的正则表达式可能如下所示：
...
您可以订阅onkeypress事件：
然后定义isNumber函数： function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.whic
...
看看这个插件(TexoTela jQuery数字) 。 这个(jStepper)是另一个。 这是一个链接，如果你想自己建立它。 $(document).ready(function() {
$("#txtboxToFilter").keydown(function (e) {
// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27
...
[ -/]是一个字符类，在字符类中， -是范围运算符。 “从'空间'到'斜线'的字符范围内的任何字符，包括”。 这意味着它使用ASCII表(基本上)来匹配字符[space] ! ， " ， # ， $ etc ......至/ 。 但是，范围仅在正方向上起作用：从低ASCII码到高ASCII码。 当你走高 - >低时，范围不适用，并且它只寻找3个字符： [space] ， dash和slash 。 例如，在一个更容易阅读的例子中： ascending: [b-g] -> matches 'b
...
看一下这个... http://www.functionx.com/vb/functions/inputbox.htm 正是我的想法。 它表示输入框没有您可以订阅的过滤事件。 所以我的建议是，你有2个选项......要么创建你自己的输入框并订阅文本框按键事件来过滤数据，要么让用户首先在输入框中输入数据并在输入后验证数据，如果你坚持使用输入框。 这些是您唯一的选择。 Check this out... http://www.functionx.com/vb/functions/inputbox.ht
...
你的代码坏了。 你应该使用+ not .
$(documen
...
绑定事件处理程序并检查文本长度，根据函数的长度调用 $('.input-box').on('input', function() {
if (this.value.trim().length >= 4) {
// call your function here
doIt();
}
});
function doIt() {
alert('hi');
}
...
您可以使用以下模式。它只允许使用字母，点和空格 /^[a-zA-Z\. ]*$/ 否则使用防止默认方法 $(function()
{
$('#username').keydown(function(er)
{
if(er.altKey||er.ctrlKey||er.shiftKey)
{
er.preventDefault();
}
...
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
