html5中文学习网

您的位置: 首页 > 网站及特效实例 > javascript特效 » 正文

JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)_基础知识_

[ ] 已经帮助:人解决问题

JavaScript onkeypress 事件gxxHTML5中文学习网 - HTML5先行者学习网

用户按下或按住一个键盘按键时会触发 onkeypress 事件。gxxHTML5中文学习网 - HTML5先行者学习网

注意:onkeypress 事件与 onkeydown 事件有些细微差别,onkeypress 事件不做相应功能键按下的处理。具体可将下面的示例更改为 onkeydown 事件后,可输入 !@#$ 等特殊字符即可体会出二者之间的差别。gxxHTML5中文学习网 - HTML5先行者学习网

提示gxxHTML5中文学习网 - HTML5先行者学习网

Internet Explorer/Chrome 浏览器使用 event.keyCode 取回被按下的字符,而 Netscape/Firefox/Opera 等浏览器使用 event.which。gxxHTML5中文学习网 - HTML5先行者学习网

利用 onkeypress 事件只允许输入数字gxxHTML5中文学习网 - HTML5先行者学习网

下面是一个利用 onkeypress 事件只允许用户在表单域输入数字的例子:gxxHTML5中文学习网 - HTML5先行者学习网

复制代码 代码如下:
gxxHTML5中文学习网 - HTML5先行者学习网
<html>gxxHTML5中文学习网 - HTML5先行者学习网
<head>gxxHTML5中文学习网 - HTML5先行者学习网
<script>gxxHTML5中文学习网 - HTML5先行者学习网
function checkNumber(e)gxxHTML5中文学习网 - HTML5先行者学习网
{gxxHTML5中文学习网 - HTML5先行者学习网
    var keynum = window.event ? e.keyCode : e.which;gxxHTML5中文学习网 - HTML5先行者学习网
    //alert(keynum);gxxHTML5中文学习网 - HTML5先行者学习网
    var tip = document.getElementById("tip");gxxHTML5中文学习网 - HTML5先行者学习网
    if( (48<=keynum && keynum<=57) || keynum == 8 ){gxxHTML5中文学习网 - HTML5先行者学习网
        tip.innerHTML = "";gxxHTML5中文学习网 - HTML5先行者学习网
        return true;gxxHTML5中文学习网 - HTML5先行者学习网
    }else {gxxHTML5中文学习网 - HTML5先行者学习网
        tip.innerHTML = "提示:只能输入数字!";gxxHTML5中文学习网 - HTML5先行者学习网
        return false;gxxHTML5中文学习网 - HTML5先行者学习网
    }gxxHTML5中文学习网 - HTML5先行者学习网
}   gxxHTML5中文学习网 - HTML5先行者学习网
</script>gxxHTML5中文学习网 - HTML5先行者学习网

</head>gxxHTML5中文学习网 - HTML5先行者学习网
<body>gxxHTML5中文学习网 - HTML5先行者学习网
<div>请输入数字:<input type="text" onkeypress="return checkNumber(event);" />gxxHTML5中文学习网 - HTML5先行者学习网
<span id="tip"></span>gxxHTML5中文学习网 - HTML5先行者学习网
</div> gxxHTML5中文学习网 - HTML5先行者学习网
</body>gxxHTML5中文学习网 - HTML5先行者学习网
</html>gxxHTML5中文学习网 - HTML5先行者学习网

gxxHTML5中文学习网 - HTML5先行者学习网

event.keyCode/event.which 得到的是一个按键对应的数字值(Unicode 编码),常用键值列于 onkeydown 事件一节中。例子中对 8 的值做特殊处理,是为了在文本域中支持退格(Backspace)键。gxxHTML5中文学习网 - HTML5先行者学习网
gxxHTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助