初识document.onkeydown及其兼容性问题

最新推荐文章于 2023-03-21 15:50:21 发布

七七仔17

最新推荐文章于 2023-03-21 15:50:21 发布

阅读量4.8w

点赞数 10

文章标签： function opera button ie 浏览器 firefox

本文链接：https://blog.csdn.net/angus_17/article/details/6874990

版权

看导师的代码，写得还真不错。。。

就是复杂啊，全是JSP，我倒。。。

不说废话了，刚学到个小知识点：在js中用：document.onkeydown来对用户敲击键盘事件进行监听，在网上整理了点，现将资料集中于此。

概念onkeypress、onkeyup、onkeydown区别：

onkeypress 这个事件在用户按下并放开任何字母数字键时发生。系统按钮（例如，箭头键和功能键）无法得到识别。
onkeyup 这个事件在用户放开任何先前按下的键盘键时发生。
onkeydown 这个事件在用户按下任何键盘键（包括系统按钮，如箭头键和功能键）时发生。

小demo：只在在输入的时候可以用backspace，其他地方不可以用。

解决onkeydown在IE和FF中的兼容问题（这个我没做过测试呢）
IE浏览器中：

var keycode = event.keyCode;
FireFox和Opera浏览器中：

var keycode = e.which;
总结简便写法如下：

var currKey=0,e=e||event; currKey=e.keyCode||e.which||e.charCode;//支持IE、FF
完整demo如下：

<button type="button" οnclick="searchAuction();" id="btn_selector"> 　　
<label>精确筛选</label>
</button>

<script type="text/javascript">
function keydown(e) {
var currKey=0,e=e||event;
currKey=e.keyCode||e.which||e.charCode;//支持IE、FF
if (currKey == 13) {
document.getElementByIdx_x("btn_selector").click();
}
}
document.onkeydown = keydown;//onkeydown事件调用方式 </script>
写法一、触发submit事件，支持IE

<form οnkeydοwn="checkkey(event)">
//上一段中介绍的event所携带的值传给了keys
function checkkey(keys)
{
//判断一下是否同时按了CTRL键和ENTER键.
if(keys.ctrlKey && keys.keyCode == 13)
//如果判断的结果确实是两个键准确无误的按下了，那么就提交数据
{
this.document.form.submit();
}
}
说明：event是将这次按键的值传递给函数作判断用的。也就是说event里面承载着我们这次按键的数据。

写法二、触发click事件,支持IE

<body οnkeydοwn="if (event.keyCode==13) {document.all.button2.click();}">

写法三、按键翻页效果，支持IE