初识onkeydown及其兼容性问题

在js中用:document.onkeydown来对用户敲击键盘事件进行监听,在网上整理了点,现将资料集中于此。

概念onkeypressonkeyuponkeydown区别:

  • 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.onkeypress = doKey;
//禁止后退键  作用于IE、Chrome  
document.onkeydown = 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" onclick = "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 onkeydown = "checkkey(event)" > //上一段中介绍的event所携带的值传给了keys
function checkkey(keys) 
{
    //判断一下是否同时按了CTRL键和ENTER键.
    if (keys.ctrlKey && keys.keyCode == 13) //如果判断的结果确实是两个键准确无误的按下了,那么就提交数据
    {
        this.document.form.submit();
    }
}

说明:event是将这次按键的值传递给函数作判断用的。也就是说event里面承载着我们这次按键的数据。

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

<body  onkeydown="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.onkeydown = jumpPage;
</script> 

应用的demo:

在test.jsp中引入test.js

document.okeydown = KeyLogin;

function KeyLogin(){

if(event.keyCode == 13){

LoginSystem();/////触发此function

}

}
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页