限制HTML的文本输入框只能输入数字的4种方法
1. keydown
通过阻止事件往keypress传播,来禁止非数字字符在文本框显示。
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function prevent(e) {
e.preventDefault ? e.preventDefault() : e.returnValue = false;
}
function digitInput(el, e) {
var ee = e || window.event;
var c = e.charCode || e.keyCode;
var val = el.val();
if (c == 110 || c == 190){
(val.indexOf(".") >= 0 || !val.length) && prevent(e);
} else {
if ((c != 8 && c != 46 &&
(c < 37 || c > 40) &&
(c < 48 || c > 57) &&
(c < 96 || c > 105))
|| e.shiftKey) {
prevent(e);
}
}
}
$(function(){
$("input[name='text1']").keydown(function(e) {
digitInput($(this), e);
});
});
</script>
</head>
<body>
<input type="text" name="text1" />
<label></label>
</body>
</html>
(1)限制input只能输入整型的整数或浮点型的小数:
function prevent(e) {
e.preventDefault ? e.preventDefault() : e.returnValue = false;
}
function digitInput(el, e) {
var ee = e || window.event;
var c = e.charCode || e.keyCode;
var val = el.val();
if (c == 110 || c == 190){
(val.indexOf(".") >= 0 || !val.length) && prevent(e);
} else {
if ((c != 8 && c != 46 &&
(c < 37 || c > 40) &&
(c < 48 || c > 57) &&
(c < 96 || c > 105))
|| e.shiftKey) {
prevent(e);
}
}
}
$(function(){
$("input[name='text1']").keydown(function(e) {
digitInput($(this), e);
});
});
(2)限制input只能输入整型的整数:
function prevent(e) {
e.preventDefault ? e.preventDefault() : e.returnValue = false;
}
function digitInput(e) {
var c = e.charCode || e.keyCode;
if ((c != 8 && c != 46 &&
(c < 37 || c > 40) &&
(c < 48 || c > 57) &&
(c < 96 || c > 105))
|| e.shiftKey) {
prevent(e);
}
}
$(function(){
$("input[name='text1']").keydown(function(e) {
digitInput(e);
});
});
(3)限制input只能输入保留小数点后一位的浮点数
function prevent(e) {
e.preventDefault ? e.preventDefault() : e.returnValue = false;
}
function digitInput(el, e) {
var ee = e || window.event;
var c = e.charCode || e.keyCode;
var val = el.val();
var num = val.split(".");
if (c == 110 || c == 190){
(val.indexOf(".") >= 0 || !val.length) && prevent(e);
} else {
if ((c != 8 && c != 46 &&
(c < 37 || c > 40) &&
(c < 48 || c > 57) &&
(c < 96 || c > 105))
|| e.shiftKey) {
prevent(e);
}
else
{
if (num[1] != undefined)
{
if (num[1].length > 0 && c != 8 && c != 46)
{
prevent(e);
}
}
}
}
}
$(function(){
$("input[name='inp']").keydown(function(e) {
digitInput($(this), e);
});
});
2. keypress
捕获的是单个字符,且捕获的键有限,不适合作为限制输入触发事件。
3. keyup
触发时,键对应的字符已经插入到文本框中,这时中断事件是不起作用的。可行方案是替换非数字为空字符,但有明显的替换痕迹:
Js代码 收藏代码
function digitInput(el, e) {
var val = el.val();
var val2 = val.replace(/[^\d]/g, '');
el.val(val2);
}
$(function(){
$("input[name='text1']").keyup(function(e) {
digitInput($(this), e);
});
});
4、将input type指定为number,但是后面会有增加减少的按钮,如果想去除这个后面的增加减少按钮可以定位一个背景为白色的元素盖住那个按钮就好了,这样即看不到,又无法接受点击事件。