限制HTML的文本编辑框只能输入数字

[color=violet]1. keydown[/color]

通过阻止事件往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 e = 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>


[color=violet]2. keypress[/color]

捕获的是单个字符,且捕获的键有限,不适合作为限制输入触发事件。

[color=violet]3. keyup[/color]

触发时,键对应的字符已经插入到文本框中,这时中断事件是不起作用的。可行方案是替换非数字为空字符,但有明显的替换痕迹:


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);
});
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值