有一个快速的方法来设置HTML文本输入(<input type=text />),只允许数字击键(加上'.')?
当前回答
我可能有另一个(简单的)解决办法…
因为String.fromCharCode(key)在QWERTY键盘上返回奇怪的东西(数字键盘返回代码为g表示1,1表示&字符..
我已经意识到,在输入中捕获keyup的最终值,将其重置为任意值是一个更简单,轻量级和防bug的方法(也可以通过一些regex…为了保持小数等等……不需要过滤其他Ctrl, Home, Del和Enter事件…)
使用jq:
<input class='pn'>
<script>
function pn(el){nb=el.value;if(isNaN(nb) || nb<1)el.value=1;}
jQuery('.pn').keyup(function(){pn(this);});
</script>
Onkeyup属性:
<input onkeyup='positiveNumericInput(this)'>
<script>function positiveNumericInput(el){nb=el.value;if(isNaN(nb) || nb<1)el.value=1;}</script>
其他回答
在任何击键上执行此函数,它将不允许除加号、连字符和圆括号之外的任何内容。
假设:+234-(123)1231231将工作 但不是信件
替换(/ ^[0 - 9 +()——]*美元/ test (char))与(/ ^[0 - 9]*美元/ test (char))只允许数字按键。
isNumber(e) {
let char = String.fromCharCode(e.keyCode);
if (/^[0-9+()-]*$/.test(char)) return true;
else e.preventDefault();
},
JavaScript
function validateNumber(evt) {
var e = evt || window.event;
var key = e.keyCode || e.which;
if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
// numbers
key >= 48 && key <= 57 ||
// Numeric keypad
key >= 96 && key <= 105 ||
// Backspace and Tab and Enter
key == 8 || key == 9 || key == 13 ||
// Home and End
key == 35 || key == 36 ||
// left and right arrows
key == 37 || key == 39 ||
// Del and Ins
key == 46 || key == 45) {
// input is VALID
}
else {
// input is INVALID
e.returnValue = false;
if (e.preventDefault) e.preventDefault();
}
}
你可以添加逗号,句号和减号(,.-)
// comma, period and minus, . on keypad
key == 190 || key == 188 || key == 109 || key == 110 ||
HTML
<input type="text" onkeydown="validateNumber(event);"/ >
你可以附加到key down事件,然后根据你需要过滤键,例如:
<input id="FIELD_ID" name="FIELD_ID" onkeypress="return validateNUM(event,this);" type="text">
实际的JavaScript处理程序是:
function validateNUM(e,field)
{
var key = getKeyEvent(e)
if (specialKey(key)) return true;
if ((key >= 48 && key <= 57) || (key == 46)){
if (key != 46)
return true;
else{
if (field.value.search(/\./) == -1 && field.value.length > 0)
return true;
else
return false;
}
}
function getKeyEvent(e){
var keynum
var keychar
var numcheck
if(window.event) // IE
keynum = e.keyCode
else if(e.which) // Netscape/Firefox/Opera
keynum = e.which
return keynum;
}
这是geowa4解决方案的扩展版本。支持min和max属性。如果数字超出范围,则显示之前的值。
你可以在这里测试。
用法:<input type=text class='number' maxlength=3 min=1 max=500>
function number(e) {
var theEvent = e || window.event;
var key = theEvent.keyCode || theEvent.which;
if(key!=13&&key!=9){//allow enter and tab
key = String.fromCharCode( key );
var regex = /[0-9]|\./;
if( !regex.test(key)) {
theEvent.returnValue = false;
if(theEvent.preventDefault) theEvent.preventDefault();
}
}
}
$(document).ready(function(){
$("input[type=text]").filter(".number,.NUMBER").on({
"focus":function(e){
$(e.target).data('oldValue',$(e.target).val());
},
"keypress":function(e){
e.target.oldvalue = e.target.value;
number(e);
},
"change":function(e){
var t = e.target;
var min = $(t).attr("min");
var max = $(t).attr("max");
var val = parseInt($(t).val(),10);
if( val<min || max<val)
{
alert("Error!");
$(t).val($(t).data('oldValue'));
}
}
});
});
如果输入是动态的,使用这个:
$(document).ready(function(){
$("body").on("focus","input[type=text].number,.NUMBER",function(e){
$(e.target).data('oldValue',$(e.target).val());
});
$("body").on("keypress","input[type=text].number,.NUMBER",function(e){
e.target.oldvalue = e.target.value;
number(e);
});
$("body").on("change","input[type=text].number,.NUMBER",function(e){
var t = e.target
var min = $(t).attr("min");
var max = $(t).attr("max");
var val = parseInt($(t).val());
if( val<min || max<val)
{
alert("Error!");
$(t).val($(t).data('oldValue'));
}
});
});
input type="number"是一个HTML5属性。
在另一种情况下,这将帮助你:
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : evt.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
<input type="number" name="somecode" onkeypress="return isNumberKey(event)"/>