限制HTML的文本输入框只能输入数字的4种方法
限制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; // FF、Chrome IE下获取事件对象
var c = e.charCode || e.keyCode; //FF、Chrome IE下获取键盘码
//var txt = $("label").text();
//$("label").text(txt + " " + c);
var val = el.val();
if (c == 110 || c == 190){ // 110 (190) - 小(主)键盘上的点
(val.indexOf(".") >= 0 || !val.length) && prevent(e); // 已有小数点或者文本框为空，不允许输入点
} else {
if ((c != 8 && c != 46 && // 8 - Backspace, 46 - Delete
(c < 37 || c > 40) && // 37 (38) (39) (40) - Left (Up) (Right) (Down) Arrow
(c < 48 || c > 57) && // 48~57 - 主键盘上的0~9
(c < 96 || c > 105)) // 96~105 - 小键盘的0~9
|| e.shiftKey) { // Shift键，对应的code为16
prevent(e); // 阻止事件传播到keypress
}
}
}
$(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; // FF、Chrome IE下获取事件对象
var c = e.charCode || e.keyCode; //FF、Chrome IE下获取键盘码
//var txt = $("label").text();
//$("label").text(txt + " " + c);
var val = el.val();
if (c == 110 || c == 190){ // 110 (190) - 小(主)键盘上的点
(val.indexOf(".") >= 0 || !val.length) && prevent(e); // 已有小数点或者文本框为空，不允许输入点
} else {
if ((c != 8 && c != 46 && // 8 - Backspace, 46 - Delete
(c < 37 || c > 40) && // 37 (38) (39) (40) - Left (Up) (Right) (Down) Arrow
(c < 48 || c > 57) && // 48~57 - 主键盘上的0~9
(c < 96 || c > 105)) // 96~105 - 小键盘的0~9
|| e.shiftKey) { // Shift键，对应的code为16
prevent(e); // 阻止事件传播到keypress
}
}
}
$(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; //FF、Chrome IE下获取键盘码
if ((c != 8 && c != 46 && // 8 - Backspace, 46 - Delete
(c < 37 || c > 40) && // 37 (38) (39) (40) - Left (Up) (Right) (Down) Arrow
(c < 48 || c > 57) && // 48~57 - 主键盘上的0~9
(c < 96 || c > 105)) // 96~105 - 小键盘的0~9
|| e.shiftKey) { // Shift键，对应的code为16
prevent(e); // 阻止事件传播到keypress
}
}
$(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; // FF、Chrome IE下获取事件对象
var c = e.charCode || e.keyCode; //FF、Chrome IE下获取键盘码
var val = el.val();
var num = val.split(".");
if (c == 110 || c == 190){ // 110 (190) - 小(主)键盘上的"点"
(val.indexOf(".") >= 0 || !val.length) && prevent(e); // 已有小数点或者文本框为空，不允许输入点
} else {
if ((c != 8 && c != 46 && // 8 - Backspace, 46 - Delete
(c < 37 || c > 40) && // 37 (38) (39) (40) - Left (Up) (Right) (Down) Arrow
(c < 48 || c > 57) && // 48~57 - 主键盘上的0~9
(c < 96 || c > 105)) // 96~105 - 小键盘的0~9
|| e.shiftKey) { // Shift键，对应的code为16
prevent(e); // 阻止事件传播到keypress
}
else
{
if (num[1] != undefined)
{
if (num[1].length > 0 && c != 8 && c != 46)
{
prevent(e); // 阻止事件传播到keypress
}
}
}
}
}
$(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，但是后面会有增加减少的按钮，如果想去除这个后面的增加减少按钮可以定位一个背景为白色的元素盖住那个按钮就好了，这样即看不到，又无法接受点击事件。声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。
- 上一篇： php中session_unset和session_destroy的区别
- 下一篇：没有了
