本文介绍 JavaScript 中的 onkeypress 事件,说明其与 onkeydown 在处理功能键及特殊字符时的区别。重点讲解如何通过 event.keyCode 和 event.which 兼容不同浏览器,并提供一个限制表单仅允许输入数字及退格键的完整代码示例。
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)键的功能。