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

  • Post author:
  • Post category:其他


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

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

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

概念onkeypress、onkeyup、onkeydown区别:

onkeypress 这个事件在用户按下并放开任何字母数字键时发生。系统按钮(例如,箭头键和功能键)无法得到识别。

onkeyup 这个事件在用户放开任何先前按下的键盘键时发生。

onkeydown 这个事件在用户按下任何键盘键(包括系统按钮,如箭头键和功能键)时发生。

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

<script type=”text/javascript”>

//处理键盘事件

function doKey(e){

var ev = e || window.event;//获取event对象

var obj = ev.target || ev.srcElement;//获取事件源

var t = obj.type || obj.getAttribute(‘type’);//获取事件源类型

if(ev.keyCode == 8 && t != “password” && t != “text” && t != “textarea”){

return false;

}

}

//禁止后退键 作用于Firefox、Opera

document.οnkeypress=doKey;

//禁止后退键 作用于IE、Chrome

document.οnkeydοwn=doKey;

</script>

解决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

<script type=”text/javascript”>

var preview_page = “14671.html”;

var next_page = “14675.html”;

var index_page = “index.html”;

var article_id = “305”;

var chapter_id = “14674”;

function jumpPage() {

if (event.keyCode==37)

location=preview_page;

if (event.keyCode==39)

location=next_page;

if (event.keyCode==13)

location=index_page;

}

document.οnkeydοwn=jumpPage;

</script>