JavaScript onkeypress 事件详解与数字输入限制示例

onkeypress 事件概述

JavaScript onkeypress 事件

当用户按下或持续按住键盘上的某个按键时，会触发 onkeypress 事件。

需要注意的是，onkeypress 与 onkeydown 事件存在细微差异，前者不响应功能键的按下操作。若将示例中的事件改为 onkeydown，即可输入 !@#$ 等特殊字符，从而直观体会两者的区别。

提示

在 Internet Explorer 和 Chrome 浏览器中，通过 event.keyCode 获取被按下的字符；而在 Netscape、Firefox 和 Opera 等浏览器中，则使用 event.which。

限制数字输入的示例代码

利用 onkeypress 事件限制仅允许输入数字

以下示例展示了如何使用 onkeypress 事件限制用户在表单输入框中仅能输入数字：

<html>
<head>
<script>
function checkNumber(e)
{
var keynum = window.event ? e.keyCode : e.which;
//alert(keynum);
var tip = document.getElementById("tip");
if( (48<=keynum && keynum<=57) || keynum == 8 ){
tip.innerHTML = "";
return true;
}else {
tip.innerHTML = "提示：只能输入数字！";
return false;
    }
}   
</script>
</head>
<body>
<div>请输入数字：<input type="text" onkeypress="return checkNumber(event);" />
<span id="tip"></span>
</div> 
</body>
</html>

event.keyCode 或 event.which 返回的是按键对应的 Unicode 编码数值，常用键值可参考 onkeydown 事件章节。本例中对数值 8 进行特殊处理，旨在文本域中支持退格（Backspace）键的功能。