我正在创建一个网页,其中我有一个输入文本字段,我想只允许数字字符,如(0,1,2,3,4,5…9)0-9。
我如何使用jQuery做到这一点?
我正在创建一个网页,其中我有一个输入文本字段,我想只允许数字字符,如(0,1,2,3,4,5…9)0-9。
我如何使用jQuery做到这一点?
当前回答
对于你正在寻找的东西来说,它可能是多余的,但我建议使用jQuery插件autonnumeric() -它很棒!
您可以只限制数字,十进制精度,最大/最小值等。
http://www.decorplanit.com/plugin/
其他回答
检查输入值是否为数字的简单方法是:
var checknumber = $('#textbox_id').val();
if(jQuery.isNumeric(checknumber) == false){
alert('Please enter numeric value');
$('#special_price').focus();
return;
}
没有一个答案在我的情况下工作,所以我在接受的答案做了一点改变,使它为动态添加的元素工作。
享受:
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);
});
重构了已接受的答案,因此不再需要使用注释,因为我讨厌注释。这也更容易用茉莉花进行测试。
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();
}
}
}
您可以使用这个非常简单的解决方案来实现同样的目的
$(“input.numbers”).keypress(function(event) { 返回 /\d/.test(String.fromCharCode(event.keyCode)); }); <script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script> <输入类型=“文本” 类=“数字” 名称=“field_name” />
我参考了这个链接来获得解决方案。它工作得很完美!!
您可以通过添加模式对文本输入使用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上工作。对于这些浏览器,我们需要使用上面的模式解决方案。然而,您仍然可以使用这个简单的填充数字输入。
$("input[type=number]").attr("type", "text").attr("pattern", "[0-9.]+");