我正在创建一个网页，其中有一个输入文本字段，我想在其中只允许数字字符，例如 (0,1,2,3,4,5...9) 0-9。
如何使用 jQuery 做到这一点？
问问题
1739081 次
69 回答
1342
注意：这是一个更新的答案。下面的评论指的是一个乱码的旧版本。
jQuery
在 JSFiddle 上自己尝试一下。
没有本机 jQuery 实现，但是您可以<input>使用以下inputFilter插件过滤文本的输入值（支持复制+粘贴、拖放、键盘快捷键、上下文菜单操作、不可键入的键、插入符号位置、不同键盘布局，以及自 IE 9 以来的所有浏览器）：
// Restricts input for the set of matched elements to the given inputFilter function.
(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);
} else {
this.value = "";
}
});
};
}(jQuery));
您现在可以使用该inputFilter插件安装输入过滤器：
$(document).ready(function() {
$("#myTextBox").inputFilter(function(value) {
return /^\d*$/.test(value); // Allow digits only, using a RegExp
});
});
有关更多输入过滤器示例，请参阅JSFiddle 演示。另请注意，您仍然必须进行服务器端验证！
纯 JavaScript（没有 jQuery）
这实际上不需要 jQuery，你也可以用纯 JavaScript 做同样的事情。看到这个答案。
HTML 5
HTML 5 有一个原生解决方案<input type="number">（参见规范），但请注意浏览器支持各不相同：
- 大多数浏览器只会在提交表单时验证输入，而不是在输入时。
- 大多数移动浏览器不支持
step,min和max属性。 - Chrome（版本 71.0.3578.98）仍然允许用户输入字符
e并E进入字段。另请参阅此问题。 - Firefox（64.0 版）和 Edge（EdgeHTML 17.17134 版）仍然允许用户在字段中输入任何文本。
在 w3schools.com 上亲自尝试。
于 2009-06-15T09:26:14.757 回答
195
这是我使用的功能：
// Numeric only control handler
jQuery.fn.ForceNumericOnly =
function()
{
return this.each(function()
{
$(this).keydown(function(e)
{
var key = e.charCode || e.keyCode || 0;
// allow backspace, tab, delete, enter, arrows, numbers and keypad numbers ONLY
// home, end, period, and numpad decimal
return (
key == 8 ||
key == 9 ||
key == 13 ||
key == 46 ||
key == 110 ||
key == 190 ||
(key >= 35 && key <= 40) ||
(key >= 48 && key <= 57) ||
(key >= 96 && key <= 105));
});
});
};
然后，您可以通过执行以下操作将其附加到您的控件：
$("#yourTextBoxName").ForceNumericOnly();
于 2010-03-08T16:57:14.497 回答
172
排队：
<input name="number" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')">不显眼的风格（使用 jQuery）：
$('input[name="number"]').keyup(function(e)
{
if (/\D/g.test(this.value))
{
// Filter non-digits from input value.
this.value = this.value.replace(/\D/g, '');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="number">于 2011-06-05T03:43:03.963 回答
105
您可以只使用一个简单的 JavaScript 正则表达式来测试纯数字字符：
/^[0-9]+$/.test(input);
如果输入是数字，则返回 true，否则返回 false。
或者对于事件键码，简单使用如下：
// Allow: backspace, delete, tab, escape, enter, ctrl+A and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
var charValue = String.fromCharCode(e.keyCode)
, valid = /^[0-9]+$/.test(charValue);
if (!valid) {
e.preventDefault();
}
于 2010-02-17T17:55:26.300 回答
100
您可以像这样在输入事件上使用：
$(document).on("input", ".numeric", function() {
this.value = this.value.replace(/\D/g,'');
});
但是，这个代码特权是什么？
- 它适用于移动浏览器（keydown 和 keyCode 有问题）。
- 它也适用于 AJAX 生成的内容，因为我们使用的是“on”。
- 比 keydown 更好的性能，例如在粘贴事件上。
于 2015-08-14T07:27:49.810 回答
69
简短而甜蜜-即使在 30 多个答案之后这永远不会引起太多关注；）
$('#number_only').bind('keyup paste', function(){
this.value = this.value.replace(/[^0-9]/g, '');
});
于 2016-02-24T02:58:47.027 回答
45
使用 JavaScript 函数isNaN ,
if (isNaN($('#inputid').val()))
if (isNaN(document.getElementById('inputid').val()))
if (isNaN(document.getElementById('inputid').value))
更新： 这里有一篇不错的文章谈论它，但使用 jQuery：将 HTML 文本框中的输入限制为数值
于 2010-03-08T17:00:39.527 回答
33
$(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
于 2009-06-15T09:26:59.340 回答
30
我在我们内部的通用 js 文件中使用它。我只是将类添加到任何需要这种行为的输入中。
$(".numericOnly").keypress(function (e) {
if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return false;
});
于 2011-02-14T19:47:32.443 回答
26
对我来说更简单的是
jQuery('.plan_eff').keyup(function () {
this.value = this.value.replace(/[^1-9\.]/g,'');
});
于 2012-04-02T11:20:32.477 回答
24
为什么这么复杂？你甚至不需要 jQuery，因为有一个 HTML5 模式属性：
<input type="text" pattern="[0-9]*">
很酷的是它在移动设备上提供了一个数字键盘，这比使用 jQuery 好得多。
于 2014-10-29T19:27:02.757 回答
21
您可以使用这个非常简单的解决方案来做同样的事情
$("input.numbers").keypress(function(event) {
return /\d/.test(String.fromCharCode(event.keyCode));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="numbers" name="field_name" />我参考了这个链接以获得解决方案。它完美地工作！
于 2014-07-30T11:35:52.923 回答
14
HTML5 中的 pattern 属性指定检查元素值的正则表达式。
<input type="text" pattern="[0-9]{1,3}" value="" />
注意：模式属性适用于以下输入类型：文本、搜索、url、电话、电子邮件和密码。
[0-9] 可以替换为任何正则表达式条件。
{1,3} 表示最小可输入 1，最大可输入 3 位。
于 2015-01-19T12:11:55.777 回答
11
$(document).ready(function() {
$("#formID").validate({
rules: {
field_name: {
numericOnly:true
}
}
});
});
$.validator.addMethod('numericOnly', function (value) {
return /^[0-9]+$/.test(value);
}, 'Please only enter numeric values (0-9)');
于 2011-02-24T23:35:56.373 回答
9
function suppressNonNumericInput(event){
if( !(event.keyCode == 8 // backspace
|| event.keyCode == 46 // delete
|| (event.keyCode >= 35 && event.keyCode <= 40) // arrow keys/home/end
|| (event.keyCode >= 48 && event.keyCode <= 57) // numbers on keyboard
|| (event.keyCode >= 96 && event.keyCode <= 105)) // number on keypad
) {
event.preventDefault(); // Prevent character input
}
}
于 2010-07-12T20:38:09.413 回答
9
在 html 代码中尝试它，就像 onkeypress 和 onpast 一样
<input type="text" onkeypress="return event.charCode >= 48 && event.charCode <= 57" onpaste="return false">
于 2017-08-04T11:20:53.630 回答
8
你可以使用这个 JavaScript 函数：
function maskInput(e) {
//check if we have "e" or "window.event" and use them as "event"
//Firefox doesn't have window.event
var event = e || window.event
var key_code = event.keyCode;
var oElement = e ? e.target : window.event.srcElement;
if (!event.shiftKey && !event.ctrlKey && !event.altKey) {
if ((key_code > 47 && key_code < 58) ||
(key_code > 95 && key_code < 106)) {
if (key_code > 95)
key_code -= (95-47);
oElement.value = oElement.value;
} else if(key_code == 8) {
oElement.value = oElement.value;
} else if(key_code != 9) {
event.returnValue = false;
}
}
}
你可以像这样将它绑定到你的文本框：
$(document).ready(function() {
$('#myTextbox').keydown(maskInput);
});
我在生产中使用上面的，它工作得很好，而且它是跨浏览器的。此外，它不依赖于 jQuery，因此您可以使用内联 JavaScript 将其绑定到您的文本框：
<input type="text" name="aNumberField" onkeydown="javascript:maskInput()"/>
于 2009-06-15T09:27:24.940 回答
8
我找到了一个非常好的和简单的解决方案，它不会像其他解决方案那样阻止用户选择文本或复制粘贴。jQuery 风格 :)
$("input.inputPhone").keyup(function() {
var jThis=$(this);
var notNumber=new RegExp("[^0-9]","g");
var val=jThis.val();
//Math before replacing to prevent losing keyboard selection
if(val.match(notNumber))
{ jThis.val(val.replace(notNumber,"")); }
}).keyup(); //Trigger on page load to sanitize values set by server
于 2013-09-19T21:07:51.657 回答
7
我认为它会帮助每个人
$('input.valid-number').bind('keypress', function(e) {
return ( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57)) ? false : true ;
})
于 2012-04-05T07:18:09.167 回答
7
这是我前段时间创建的一个快速解决方案。你可以在我的文章中阅读更多关于它的信息：
http://ajax911.com/numbers-numeric-field-jquery/
$("#textfield").bind("keyup paste", function(){
setTimeout(jQuery.proxy(function() {
this.val(this.val().replace(/[^0-9]/g, ''));
}, $(this)), 0);
});
于 2012-05-24T19:51:13.987 回答
6
我根据上面@user261922 的帖子编写了我的，稍作修改，以便您可以选择全部、选项卡并可以在同一页面上处理多个“仅限数字”字段。
var prevKey = -1, prevControl = '';
$(document).ready(function () {
$(".OnlyNumbers").keydown(function (event) {
if (!(event.keyCode == 8 // backspace
|| event.keyCode == 9 // tab
|| event.keyCode == 17 // ctrl
|| event.keyCode == 46 // delete
|| (event.keyCode >= 35 && event.keyCode <= 40) // arrow keys/home/end
|| (event.keyCode >= 48 && event.keyCode <= 57) // numbers on keyboard
|| (event.keyCode >= 96 && event.keyCode <= 105) // number on keypad
|| (event.keyCode == 65 && prevKey == 17 && prevControl == event.currentTarget.id)) // ctrl + a, on same control
) {
event.preventDefault(); // Prevent character input
}
else {
prevKey = event.keyCode;
prevControl = event.currentTarget.id;
}
});
});
于 2011-08-09T20:35:21.113 回答
6
您希望允许选项卡：
$("#txtboxToFilter").keydown(function(event) {
// Allow only backspace and delete
if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 ) {
// 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.keyCode < 96 || event.keyCode > 105 )) {
event.preventDefault();
}
}
});
于 2011-10-05T08:04:27.467 回答
6
这是一个使用 jQuery UI Widget factory 的答案。您可以轻松自定义允许的字符。
$('input').numberOnly({
valid: "0123456789+-.$,"
});
这将允许数字、数字符号和美元金额。
$.widget('themex.numberOnly', {
options: {
valid : "0123456789",
allow : [46,8,9,27,13,35,39],
ctrl : [65],
alt : [],
extra : []
},
_create: function() {
var self = this;
self.element.keypress(function(event){
if(self._codeInArray(event,self.options.allow) || self._codeInArray(event,self.options.extra))
{
return;
}
if(event.ctrlKey && self._codeInArray(event,self.options.ctrl))
{
return;
}
if(event.altKey && self._codeInArray(event,self.options.alt))
{
return;
}
if(!event.shiftKey && !event.altKey && !event.ctrlKey)
{
if(self.options.valid.indexOf(String.fromCharCode(event.keyCode)) != -1)
{
return;
}
}
event.preventDefault();
});
},
_codeInArray : function(event,codes) {
for(code in codes)
{
if(event.keyCode == codes[code])
{
return true;
}
}
return false;
}
});
于 2013-03-25T16:58:52.337 回答
6
这似乎牢不可破。
// Prevent NULL input and replace text.
$(document).on('change', 'input[type="number"]', function (event) {
this.value = this.value.replace(/[^0-9\.]+/g, '');
if (this.value < 1) this.value = 0;
});
// Block non-numeric chars.
$(document).on('keypress', 'input[type="number"]', function (event) {
return (((event.which > 47) && (event.which < 58)) || (event.which == 13));
});
于 2013-06-26T12:52:46.870 回答
6
这是两种不同的方法：
- 允许带小数点的数值
- 允许没有小数点的数值
方法一：
$("#approach1").on("keypress keyup blur",function (e) {
$(this).val($(this).val().replace(/[^0-9\.]/g,''));
if ((e.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
event.preventDefault();
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Numeric with decimal point</h2><br/>
<span>Enter Amount</span>
<input type="text" name="amount" id="approach1">方法 2：
$("#approach2").on("keypress keyup blur",function (event) {
$(this).val($(this).val().replace(/[^\d].+/, ""));
if ((event.which < 48 || event.which > 57)) {
event.preventDefault();
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Numeric without decimal point</h2><br/>
<span>Enter Amount</span>
<input type="text" name="amount" id="approach2">于 2020-05-02T09:55:18.663 回答
5
需要确保您的数字小键盘和 Tab 键也能正常工作
// Allow only backspace and delete
if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9) {
// 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.keyCode >= 96 && event.keyCode <= 105)) {
}
else {
event.preventDefault();
}
}
于 2009-10-16T07:13:21.747 回答
5
我想提供一点帮助，我制作了我的版本，onlyNumbers功能......
function onlyNumbers(e){
var keynum;
var keychar;
if(window.event){ //IE
keynum = e.keyCode;
}
if(e.which){ //Netscape/Firefox/Opera
keynum = e.which;
}
if((keynum == 8 || keynum == 9 || keynum == 46 || (keynum >= 35 && keynum <= 40) ||
(event.keyCode >= 96 && event.keyCode <= 105)))return true;
if(keynum == 110 || keynum == 190){
var checkdot=document.getElementById('price').value;
var i=0;
for(i=0;i<checkdot.length;i++){
if(checkdot[i]=='.')return false;
}
if(checkdot.length==0)document.getElementById('price').value='0';
return true;
}
keychar = String.fromCharCode(keynum);
return !isNaN(keychar);
}
只需添加输入标签 "...input ... id="price" onkeydown="return onlyNumbers(event)"..." 就完成了；）
于 2010-12-07T05:05:41.550 回答
5
这就是为什么我最近写信来完成这个。我知道这已经得到解答，但我将其留作以后使用。
此方法仅允许 0-9 键盘和小键盘、退格、制表符、左右箭头（普通表单操作）
$(".numbersonly-format").keydown(function (event) {
// Prevent shift key since its not needed
if (event.shiftKey == true) {
event.preventDefault();
}
// Allow Only: keyboard 0-9, numpad 0-9, backspace, tab, left arrow, right arrow, delete
if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105) || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 || event.keyCode == 39 || event.keyCode == 46) {
// Allow normal operation
} else {
// Prevent the rest
event.preventDefault();
}
});
于 2011-03-08T17:20:41.763 回答
5
我也想回答：）
$('.justNum').keydown(function(event){
var kc, num, rt = false;
kc = event.keyCode;
if(kc == 8 || ((kc > 47 && kc < 58) || (kc > 95 && kc < 106))) rt = true;
return rt;
})
.bind('blur', function(){
num = parseInt($(this).val());
num = isNaN(num) ? '' : num;
if(num && num < 0) num = num*-1;
$(this).val(num);
});
就是这样……只是数字。:) 几乎它只适用于“模糊”，但是......
于 2012-01-19T00:17:18.107 回答
5
检查输入值是否为数字的简单方法是：
var checknumber = $('#textbox_id').val();
if(jQuery.isNumeric(checknumber) == false){
alert('Please enter numeric value');
$('#special_price').focus();
return;
}
于 2013-10-22T06:59:05.423 回答
5
只需在 Jquery 中应用此方法，您就可以验证您的文本框仅接受数字。
function IsNumberKeyWithoutDecimal(element) {
var value = $(element).val();
var regExp = "^\\d+$";
return value.match(regExp);
}
在此处尝试此解决方案
于 2014-01-29T05:29:01.797 回答
5
您可以尝试 HTML5 数字输入：
<input type="number" placeholder="enter the number" min="0" max="9">
由于 min 属性设置为 0 且 max 属性设置为 9，此输入标记元素现在将仅取 0 到 9 之间的值。
欲了解更多信息，请访问http://www.w3schools.com/html/html_form_input_types.asp
于 2015-04-14T17:05:35.103 回答
5
您可以使用以下代码。
<input type="text" onkeypress="return event.charCode >= 48 && event.charCode <= 57">于 2020-05-18T04:34:56.433 回答
4
使用击键来检测按下的字符存在令人难以置信的兼容性问题......请参阅quirksmode以了解更多信息。
我建议使用 keyup 创建你的过滤器，因为这样你就有了 $(element).val() 方法，你可以使用它来评估实际的通用字符。
然后，您可以使用正则表达式过滤掉任何非数字，例如：
替换(/[^0-9]/g,'');
这可以解决所有问题，例如移位和粘贴问题，因为总是有一个 keyup，因此将始终评估该值（除非关闭 javascript）。
所以......把它变成JQuery......这是我正在编写的一个未完成的插件，它被称为输入掩码，完成后将支持更多掩码。现在它有数字掩码工作。
来了……
/**
* @author Tom Van Schoor
* @company Tutuka Software
*/
(function($) {
/**
* @param {Object}
* $$options options to override settings
*/
jQuery.fn.inputmask = function($$options) {
var $settings = $.extend( {}, $.fn.inputmask.defaults, $$options);
return this.each(function() {
// $this is an instance of the element you call the plug-in on
var $this = $(this);
/*
* This plug-in does not depend on the metadata plug-in, but if this
* plug-in detects the existence of the metadata plug-in it will
* override options with the metadata provided by that plug-in. Look at
* the metadata plug-in for more information.
*/
// o will contain your defaults, overruled by $$options,
// overruled by the meta-data
var o = $.metadata ? $.extend( {}, $settings, $this.metadata()) : $settings;
/*
* if digits is in the array 'validators' provided by the options,
* stack this event handler
*/
if($.inArray('digits', o.validators) != -1) {
$this.keyup(function(e) {
$this.val(stripAlphaChars($this.val()));
});
}
/*
* There is no such things as public methods in jQuery plug-ins since
* there is no console to perform commands from a client side point of
* view. Typically only private methods will be fired by registered
* events as on-click, on-drag, etc... Those registered events could be
* seen as public methods.
*/
// private method
var stripAlphaChars = function(string) {
var str = new String(string);
str = str.replace(/[^0-9]/g, '');
return str;
}
});
};
// static public functions
//jQuery.fn.inputmask.doSomething = function(attr) {
//};
// static public members
//jQuery.fn.inputmask.someStaticPublicMember;
// some default settings that can be overridden by either $$options or
// metadata
// If you need callback functions for the plug-in, this is where they get
// set
jQuery.fn.inputmask.defaults = {
validators : []
};
})(jQuery);
要使用它，只需执行以下操作：
$('#someElementId').inputmask({
validators: ['digits','someOtherNotYetImplementedValidator']
});
'someOtherNotYetImplementedValidator' 只是为了展示如何为更多的未来掩码/验证器扩展它。您可以添加或忽略它，它不会破坏任何东西;-)
对于额外杂乱的评论，我正在使用我为工作人员创建的模板。
希望这会有所帮助，干杯
于 2011-03-18T09:30:00.530 回答
4
您可以通过添加模式对文本输入使用 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] 来说不是那么简单...
[type="number"]的问题是我们不能只删除最后的无效字符。只要输入无效，用户代理就会返回一个空字符串。
来自 W3C HTML5 规范：
如果元素的值不是有效的浮点数，则将其设置为空字符串。
https://dev.w3.org/html5/spec-LC/number-state.html#number-state
这意味着我们需要一种手动存储先前输入值的方法。
所以对于数字输入，解决方案如下所示：
$("input[type=number], input[type=text][pattern]").on("input", function () {
if (!this.checkValidity())
this.value = $(this).data("current-valid") || "";
else
$(this).data("current-valid", this.value);
});
不幸的是，这不适用于 IE 和 EDGE。对于这些浏览器，我们需要使用上述模式解决方案。但是，您仍然可以通过这个简单的 polyfill 使用数字输入。
$("input[type=number]").attr("type", "text").attr("pattern", "[0-9.]+");
于 2018-04-12T14:08:34.337 回答
3
为了详细说明答案＃3，我将执行以下操作（注意：仍然不支持通过键盘或鼠标进行粘贴操作）：
$('#txtNumeric').keypress(
function(event) {
//Allow only backspace and delete
if (event.keyCode != 46 && event.keyCode != 8) {
if (!parseInt(String.fromCharCode(event.which))) {
event.preventDefault();
}
}
}
);
于 2010-03-08T16:50:28.903 回答
3
此 jQuery 代码过滤掉键入的字符 whileShift或被Ctrl按住Alt。
$('#AmountText').keydown(function (e) {
if (e.shiftKey || e.ctrlKey || e.altKey) { // if shift, ctrl or alt keys held down
e.preventDefault(); // Prevent character input
} else {
var n = e.keyCode;
if (!((n == 8) // backspace
|| (n == 46) // delete
|| (n >= 35 && n <= 40) // arrow keys/home/end
|| (n >= 48 && n <= 57) // numbers on keyboard
|| (n >= 96 && n <= 105)) // number on keypad
) {
e.preventDefault(); // Prevent character input
}
}
});
于 2011-02-15T21:14:16.243 回答
3
我对最佳答案有疑问。它不包括数字键盘，如果按 shift+number 也不应显示特殊符号。但此解决方案无法解决此问题。
我在这个线程中找到的最佳链接是： http ://www.west-wind.com/weblog/posts/2011/Apr/22/Restricting-Input-in-HTML-Textboxes-to-Numeric-Values
我是stackoverflow的新手，所以我不知道是否可以将更好的解决方案编辑到顶帖中。
于 2011-09-16T09:45:02.167 回答
3
如果您必须解决变音符号和特殊字符，请尝试使用：
$(this).on( 'keypress', function( e )
{
// Ensure that it is a number and stop the keypress
if (e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) {
e.preventDefault();
}
});
于 2014-07-11T08:38:54.787 回答
3
这是正则表达式的方式：
$('input').bind('keypress', function (event) {
var regex = new RegExp("^[0-9]+$");
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
event.preventDefault();
return false;
}
});
https://jsfiddle.net/astrapi69/qbk2vjty/1/
如果您想限制其他字符然后是数字，您可以将正则表达式更改为其他任何内容。
于 2015-09-17T14:49:51.060 回答
3
更新解决方案以获得更好的用户体验，解决复制+粘贴问题并替换已弃用的 keyCode 属性：
HTML
<input type="tel">
jQuery
$('[type=tel]').on('change', function(e) {
$(e.target).val($(e.target).val().replace(/[^\d]/g, ''))
})
$('[type=tel]').on('keypress', function(e) {
keys = ['0','1','2','3','4','5','6','7','8','9']
return keys.indexOf(event.key) > -1
})
细节：
首先，输入类型：
number显示缩小实际输入空间的向上/向下箭头，我发现它们很难看，并且仅在数字表示数量时才有用（电话，区号，ID ......不需要它们）
tel提供类似的浏览器验证数字没有箭头
使用 [number / tel] 还有助于在移动设备上显示数字键盘。
对于 JS 验证，我最终需要 2 个函数，一个用于普通用户输入（按键），另一个用于复制+粘贴修复（更改），其他组合会给我带来糟糕的用户体验。
我使用更可靠的 KeyboardEvent.key而不是现在已弃用的 KeyboardEvent.charCode
根据您的浏览器支持，您可以考虑使用Array.prototype.includes()而不是名称不佳的Array.prototype.indexOf()（对于真/假结果）
于 2017-04-05T04:32:43.197 回答
2
对于您正在寻找的东西来说，这可能有点矫枉过正，但我建议使用一个名为 autoNumeric() 的 jQuery 插件——它很棒！
您只能限制为数字、小数精度、最大值/最小值等。
于 2011-12-06T18:56:29.933 回答
2
在 document.ready 中添加以下代码
$('.class of text box').keyup(function ()
{
this.value = this.value.replace(/[^0-9]/g, '');
});
于 2014-06-11T05:33:49.477 回答
2
您可以使用HTML5 输入类型 number来限制仅数字条目：
<input type="number" name="someid" />
这仅适用于 HTML5 投诉浏览器。确保您的 html 文档的 doctype 是：
<!DOCTYPE html>
出于一般目的，您可以进行 JS 验证，如下所示：
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
<input type="someid" name="number" onkeypress="return isNumberKey(event)"/>
如果您想允许小数，请用以下内容替换“if 条件”：
if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))
来源： HTML 文本输入只允许数字输入
JSFiddle 演示：http: //jsfiddle.net/Gagan_Gami/nSjy7/333/
于 2014-06-11T13:34:18.783 回答
2
这里的很多人都在使用不容易记住的keycode属性。如果您没有语言环境问题，那么您可以简单地使用实际上是用户键入的输入的键。
看到这个小提琴
$("#txt").on("keypress",function(e){
console.log("Entered Key is " + e.key);
switch (e.key)
{
case "1":
case "2":
case "3":
case "4":
case "5":
case "6":
case "7":
case "8":
case "9":
case "0":
case "Backspace":
return true;
break;
case ".":
if ($(this).val().indexOf(".") == -1) //Checking if it already contains decimal. You can Remove this condition if you do not want to include decimals in your input box.
{
return true;
}
else
{
return false;
}
break;
default:
return false;
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Enter Value
<input id="txt" type="text" />问题然后看下面的简单代码。
请注意，此示例还包含对十进制输入的验证。
根据这个问题，它不是必需的，因此您可以简单地删除案例“。” 删除小数项。
于 2017-08-04T05:18:22.450 回答
1
/**
Makes the textbox to accept only numeric input
*/
(function($) {
$.fn.allowOnlyNumeric = function() {
/**
The interval code is commented as every 250 ms onchange of the textbox gets fired.
*/
// var createDelegate = function(context, method) {
// return function() { method.apply(context, arguments); };
// };
/**
Checks whether the key is only numeric.
*/
var isValid = function(key) {
var validChars = "0123456789";
var validChar = validChars.indexOf(key) != -1;
return validChar;
};
/**
Fires the key down event to prevent the control and alt keys
*/
var keydown = function(evt) {
if (evt.ctrlKey || evt.altKey) {
evt.preventDefault();
}
};
/**
Fires the key press of the text box
*/
var keypress = function(evt) {
var scanCode;
//scanCode = evt.which;
if (evt.charCode) { //For ff
scanCode = evt.charCode;
}
else { //For ie
scanCode = evt.keyCode;
}
if (scanCode && scanCode >= 0x20 /* space */) {
var c = String.fromCharCode(scanCode);
if (!isValid(c)) {
evt.preventDefault();
}
}
};
/**
Fires the lost focus event of the textbox
*/
var onchange = function() {
var result = [];
var enteredText = $(this).val();
for (var i = 0; i < enteredText.length; i++) {
var ch = enteredText.substring(i, i + 1);
if (isValid(ch)) {
result.push(ch);
}
}
var resultString = result.join('');
if (enteredText != resultString) {
$(this).val(resultString);
}
};
//var _filterInterval = 250;
//var _intervalID = null;
//var _intervalHandler = null;
/**
Dispose of the textbox to unbind the events.
*/
this.dispose = function() {
$(this).die('change', onchange);
$(this).die('keypress', keypress);
$(this).die('keydown', keydown);
//window.clearInterval(_intervalHandler);
};
$(this).live('change', onchange);
$(this).live('keypress', keypress);
$(this).live('keydown', keydown);
//_intervalHandler = createDelegate(this, onchange);
//_intervalID = window.setInterval(_intervalHandler, _filterInterval);
}
})(jQuery);
上面的 $ 插件是从 AjaxControlToolkit 过滤器文本框extender.js 编写的。
然而，没有从 AjaxControlToolkit 借用的一种行为是，当用户复制和粘贴任何非数字值时，onchange 事件会触发并且文本框会占用这些值。我浏览了代码，发现每 250 毫秒后调用一次 onchange，这对性能造成了影响，因此对此部分进行了评论。
于 2011-03-18T05:35:59.913 回答
1
这个答案是完美的，但我们甚至可以通过将它与jQuery.Validation 插件相结合来使其更好、更强大。
通过使用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 验证，hooooooooray！）
于 2011-10-05T03:06:54.477 回答
1
试试这个
$('.plan_eff').keyup(function () {
this.value = this.value.replace(/[^1-9\.]/g,'');
});
于 2016-08-05T07:50:46.950 回答
1
在我的情况下，没有一个答案有效，所以我对接受的答案做了一些改动，以使其适用于动态添加的元素。
享受 ：
var inputFilter = function (elem, cb) {
/*
* /^-?\d*$/ restricts input to integer numbers
* /^\d*$/ restricts input to unsigned integer numbers
* /^[0-9a-f]*$/i restricts input to hexadecimal numbers
* /^-?\d*[.,]?\d*$/ restricts input to floating point numbers (allowing both . and , as decimal separator)
* /^-?\d*[.,]?\d{0,2}$/ restricts input to currency values (i.e. at most two decimal places)
*/
bdy.on('input keydown keyup mousedown mouseup select contextmenu drop', elem, function () {
if (cb(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);
}
});
};
用法 ：
inputFilter('#onlyDigitsInput', function (val) {
return /^\d*$/.test(val);
});
于 2018-12-17T21:51:42.040 回答
1
最简单的解决方案是在您的 html 表单代码中添加：
<input type="number"
如果是 php 表单，则添加：
$data = array(
'type' => 'number',
这两个
- 阻止用户输入逗号
- 阻止用户粘贴逗号（它粘贴数字但去掉逗号）
于 2020-09-17T18:31:36.810 回答
1
如果有一个平滑的 OneLiner：
<input type="text" onkeypress="return /[0-9]/i.test(event.key)" >
于 2022-01-04T12:14:07.613 回答
0
jQuery("#no_of").keypress(function(event){
//Allow only backspace and delete
if (event.keyCode != 46 && event.keyCode != 8) {
if (!parseInt(String.fromCharCode(event.which))) {
event.preventDefault();
}
}
});
jQuery("#no_of").keyup(function(e){
var temp_s= jQuery("#no_of").val();
var multiply_val= temp_s*10;
jQuery("#ex-r").html(multiply_val);
});
于 2011-01-25T06:58:26.900 回答
0
我建议也检查 event.metaKey 。如果设置为 true，则用户可能正在执行类似 cmd-A 的操作来选择字段中的所有文本。你也应该允许。
于 2011-11-06T21:23:32.187 回答
0
我正在使用这种形式。对我来说似乎是正确的允许像home,和之类的键end，但用户的缺点是可以打印特殊字符：shiftctrl
$("#busca_cep").keydown(function(event) {
if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 13 || event.keyCode == 16 || event.keyCode == 36 || event.keyCode == 35) {
if (event.keyCode == 13) {
localiza_cep(this.value);
}
} else {
if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
event.preventDefault();
}
}
});
于 2011-12-16T13:36:56.137 回答
0
另一种方法如下。这也将处理粘贴。[用于字母数字验证]
//Input Validation
var existingLogDescription = "";
$('.logDescription').keydown(function (event) {
existingLogDescription = this.value;
});
$('.logDescription').keyup(function () {
if (this.value.match(/[^a-zA-Z0-9 ]/g)) {
alert("Log Description should contain alpha-numeric values only");
this.value = this.value.replace(/[^a-zA-Z0-9 ]/g, '');
this.value = existingLogDescription;
}
});
于 2012-09-12T09:00:16.100 回答
0
检查是否已使用小数点：-
// Stop: Multiple decimal points
if((e.keyCode == 190 || e.keyCode == 110) && ((this.value).indexOf(".") >= 0))
e.preventDefault();
于 2013-02-05T11:33:36.960 回答
0
$(document).ready(function()
{
$("#textBoxId").bind("change",checkInput);
});
function checkInput()
{
// check if $('#textBoxId').val() is under your constraints
// then change its value, removing the last character
// since this event will be called each time you
// type a character
}
于 2013-03-27T06:05:28.640 回答
0
重构了接受的答案，以便不再需要使用评论，因为我讨厌评论。这也更容易用茉莉花进行测试。
allowBackspaceDeleteTabEscapeEnterPress: function(event){
return ($.inArray(event.keyCode, [46, 8, 9, 27, 13, 190]) >= 0);
},
allowContorlAPress: function(event){
return (event.keyCode == 65 && event.ctrlKey === true)
},
allowHomeEndLeftRightPress: function(event){
return (event.keyCode >= 35 && event.keyCode <= 39)
},
theKeyPressedIsEditRelated: function (event) {
return (this.allowBackspaceDeleteTabEscapeEnterPress(event)
|| this.allowContorlAPress(event)
|| this.allowHomeEndLeftRightPress(event));
},
isNotFromTheNumKeyPad: function (event) {
return (event.keyCode < 96 || event.keyCode > 105);
},
isNotFromTopRowNumberKeys: function (event) {
return (event.keyCode < 48 || event.keyCode > 57);
},
theKeyIsNonNumeric: function (event) {
return (event.shiftKey
|| (this.isNotFromTopRowNumberKeys(event)
&& this.isNotFromTheNumKeyPad(event)));
},
bindInputValidator: function(){
$('.myinputclassselector').keydown(function (event) {
if(this.validateKeyPressEvent(event)) return false;
});
},
validateKeyPressEvent: function(event){
if(this.theKeyPressedIsEditRelated(event)){
return;
} else {
if (this.theKeyIsNonNumeric(event)) {
event.preventDefault();
}
}
}
于 2013-11-25T14:44:06.520 回答
0
使用下面的简单 jQuery 以在 tetbox 中只允许数字字符。您不需要手动过滤所有特殊字符，因此不会有丢失某些特殊字符的危险。这将只允许数字 0-9：（将下面的代码放在准备好的文档中，并根据您的数字文本字段类名更改类名。）
//Event of data being keyed in to textbox with class="numericField".
$(".numericField").keyup(function() {
// Get the non Numeric char that was enetered
var nonNumericChars = $(this).val().replace(/[0-9]/g, '');
// Now set the value in text box
$(this).val( $(this).val().replace(nonNumericChars, ''));
});
于 2014-11-11T23:34:07.397 回答
0
我将所有答案合二为一，并提出以下代码：
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"。如果没有此选项，您可能会遇到移动设备上的自动完成算法问题。
于 2015-06-19T12:32:38.140 回答
0
function validate_profile(frmid) {
var form = $('#' + frmid);
var error = $('.alert-danger', form);
var success = $('.alert-success', form);
form.validate({
errorElement: 'span', //default input error message container
errorClass: 'help-block', // default input error message class
focusInvalid: true, // do not focus the last invalid input
ignore: "",
rules: {
contact_no: {
required: true,
minlength: 10,
maxlength: 10,
number: true
}, email_id: {
required: true,
email: true
}
},
invalidHandler: function (event, validator) { //display error alert on form submit
success.hide();
error.show();
Metronic.scrollTo(error, -7000);
},
highlight: function (element) { // hightlight error inputs
$(element)
.closest('.form-group').addClass('has-error'); // un set error class to the control group
$(element)
.closest('.form-group').removeClass('has-success'); // set success class to the control group
},
unhighlight: function (element) { // revert the change done by hightlight
$(element)
.closest('.form-group').removeClass('has-error'); // un set error class to the control group
$(element)
.closest('.form-group').addClass('has-success'); // set success class to the control group
error.hide();
},
success: function (label) {
label.closest('.form-group').removeClass('has-error');
label.closest('.form-group').addClass('has-success');
},
submitHandler: function (form) {
success.show();
error.hide();
form.submit();
}
});
}
于 2015-09-29T05:09:08.057 回答
0
在输入文本中放置一个类并将其命名为 only_numbers
将jquery代码放在页面中
$(document).ready(function() {
$('.only_numbers').keyup(function() {
var numbers = $(this).val();
$(this).val(numbers.replace(/\D/, ''));
});
});
玩得开心 ：-）
于 2015-12-23T07:19:50.223 回答
0
这是我用来验证整数或浮点值的数字输入（jQuery 的不显眼的风格）：
$('input[name="number"]').keyup(function(e) {
var float = parseFloat($(this).attr('data-float'));
/* 2 regexp for validating integer and float inputs *****
> integer_regexp : allow numbers, but do not allow leading zeros
> float_regexp : allow numbers + only one dot sign (and only in the middle of the string), but do not allow leading zeros in the integer part
*************************************************************************/
var integer_regexp = (/[^0-9]|^0+(?!$)/g);
var float_regexp = (/[^0-9\.]|^\.+(?!$)|^0+(?=[0-9]+)|\.(?=\.|.+\.)/g);
var regexp = (float % 1 === 0) ? integer_regexp : float_regexp;
if (regexp.test(this.value)) {
this.value = this.value.replace(regexp, '');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" data-float="1" id="number" name="number" placeholder="integer">
<input type="text" data-float="0.1" id="number" name="number" placeholder="float">于 2017-04-28T23:11:21.897 回答
0
在这里使用 java Script 或 jQuery 有很多很好的答案。
我将添加一个非常简单的方法来仅使用 HTML5 进行存档。
<input type="number" name="quantity" min="0" max="9">
于 2017-10-03T07:53:29.807 回答
0
$(document).on("keypress", ".classname", function(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
});
于 2019-07-18T17:26:45.843 回答
0
如果添加了非数字字符，这将保持先前的值。
$(document).on('input', '.digit-input', function() {
var prevVal = $(this).attr('ov') ? $(this).attr('ov') : '';
var newVal = this.value.replace(/[^0-9]/g, '');
this.value = newVal != '' ? newVal : prevVal;
$(this).attr('ov', this.value);
});
$(document).on('input', '.digit-input', function() {
var prevVal = $(this).attr('ov') ? $(this).attr('ov') : '';
var newVal = this.value.replace(/[^0-9]/g, '');
this.value = newVal != '' ? newVal : prevVal;
$(this).attr('ov', this.value);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="digit-input">于 2020-04-19T12:01:06.360 回答
-1
使用 jquery 数值。下面的函数允许十进制和数值。
示例： $("#inputId").numeric({ allow: "." });
于 2012-07-30T13:12:04.543 回答
-2
function Numbers(e)
{
if($.browser.msie)
{
if(e.keyCode > 47 && e.keyCode < 58)
return true;
else
return false;
}
else
{
if((e.charCode > 47 && e.charCode < 58) || (e.charCode == 0))
return true;
else
return false;
}
}
我希望这适用于所有浏览器。
于 2011-11-28T06:24:23.300 回答