我正在创建一个网页,其中我有一个输入文本字段,我想只允许数字字符,如(0,1,2,3,4,5…9)0-9。
我如何使用jQuery做到这一点?
我正在创建一个网页,其中我有一个输入文本字段,我想只允许数字字符,如(0,1,2,3,4,5…9)0-9。
我如何使用jQuery做到这一点?
当前回答
这个答案是完美的,但我们甚至可以通过将其与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 !
其他回答
/**
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);
上面的$ plugin是从AjaxControlToolkit过滤器文本框extender.js编写的。
然而,有一个行为并没有从AjaxControlToolkit中借用,那就是当用户复制和粘贴任何非数字值时,onchange事件就会触发,文本框就会吞噬这些值。我检查了代码,发现这个onchange在每250ms之后被调用,这是一个性能打击,因此注释了这部分。
内联:
<输入名称=“号码”onkeyup=“if”值=这个值。“>
不显眼的风格(使用jQuery):
$(“输入[name = "数量"]”).keyup(函数(e) { 如果(\ D / g.test (this.value)) { //从输入值中过滤非数字。 这一点。Value = this.value。替换(\ D / g,”); } }); < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> <输入名称= "数量" >
这是我不久前创建的一个快速解决方案。你可以在我的文章中了解更多:
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);
});
用这种形式。在我看来,允许home, end, shift和ctrl这样的键是正确的,缺点是用户可以打印特殊字符:
$("#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();
}
}
});
我建议检查事件。我也带着。如果设置为true,用户可能会执行类似cmd-A的操作来选择字段中的所有文本。你也应该承认这一点。