当前位置:首页> 编程笔记> JS/JQuery
关键字
文章内容
JS监听键盘动作(代码实现和优化)
 
 
修改时间:[2012/05/27 20:29]    阅读次数:[6403]    发表者:[起缘]
 

1 按键事件的按键码和字符码

    按键事件的按键码和字符码缺乏浏览器间的可移植性,对于不同的浏览器和不同的案件事件,按键码和字符码的存储方式都是不同的,按键事件,浏览器和按键事件对象属性关系如下表:

    在IE中,只有一个keyCode属性,并且它的解释取决于事件类型。对于keydown来说,keyCode存储的是按键码,对于 keypress事件来说,keyCode存储的是一个字符码。而IE中没有which和charCode属性,所以which和charCode属性始 终为undefined。

    FireFox中keyCode始终为0,时间keydown/keyup时,charCode=0,which为按键码。事件keypress时,which和charCode二者的值相同,存储了字符码。

    在Opera中,keyCode和which二者的值始终相同,在keydown/keyup事件中,它们存储按键码,在keypress时间中,它们存储字符码,而charCode没有定义,始终是undefined。

2 用keydown/keyup还是keypress

    JS监听监键盘动作(浏览器的按键事件)已经介绍了keydown/keyup和keypress的区别,有一条比较通用的规则,keydown事件对于功能按键来说是最有用的,而keypress事件对于可打印按键来说是最有用的。

    键盘记录主要是针对于可打印字符和部分功能按键,所以keypress是首选,然而正如第一部分提到的,IE中keypress不支持功能按键,所以应该用keydown/keyup事件来进行补充。

3 代码的实现
   总体思路,用keypress事件对象获取按键字符,用keydown事件获取功能字符,如Enter,Backspace等。代码实现如下所示

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
< HEAD><TITLE>js 按键记录</TITLE>
< META NAME="Generator" CONTENT="EditPlus">
< META NAME="Author" CONTENT="">
< META NAME="Keywords" CONTENT="js 按键记录">
<META NAME="Description" CONTENT="js 按键记录">
< /HEAD>
< BODY>

<script type="text/javascript">
< !--
var keystring = "";//记录按键的字符串

function $(s)
{
   return document.getElementById(s)?document.getElementById(s):s;
}

function keypress(e)
{
   var currKey=0,CapsLock=0,e=e||event;
   currKey=e.keyCode||e.which||e.charCode;
   CapsLock=currKey>=65&&currKey<=90;
   switch(currKey)
   {
   //屏蔽了退格、制表、回车、空格、方向键、删除键
   case 8: case 9:case 13:case 32:case 37:case 38:case 39:case 40:case 46:

            keyName = ""; break;
   default:keyName = String.fromCharCode(currKey); break;
   }
   keystring += keyName;
}

function keydown(e)
{
   var e = e||event;
   var currKey = e.keyCode||e.which||e.charCode;
   if((currKey>7&&currKey<14)||(currKey>31&&currKey<47))
   {
       switch(currKey)
       {
       case 8: keyName = "[退格]"; break;
       case 9: keyName = "[制表]"; break;
       case 13:keyName = "[回车]"; break;
       case 32:keyName = "[空格]"; break;
       case 33:keyName = "[PageUp]";   break;
       case 34:keyName = "[PageDown]";   break;
       case 35:keyName = "[End]";   break;
       case 36:keyName = "[Home]";   break;
       case 37:keyName = "[方向键左]";   break;
       case 38:keyName = "[方向键上]";   break;
       case 39:keyName = "[方向键右]";   break;
       case 40:keyName = "[方向键下]";   break;
       case 46:keyName = "[删除]";   break;
       default: keyName = "";    break;
       }
       keystring += keyName;
   }
   $("content").innerHTML=keystring;
}

function keyup(e)
{
   $("content").innerHTML=keystring;
}

document.onkeypress = keypress;
document.onkeydown = keydown;
document.onkeyup = keyup;

//-->
< /script>


<input type="text" />
< input type="button" value="清空记录" onclick="$('content').innerHTML='';keystring='';"/>
< br/>请按下任意键查看键盘响应键值:<span id="content"></span>
< /BODY>
< /HTML>


代码分析:
   $():根据ID获取dom
   keypress(e):实现对字符码的截获,由于功能按键要用keydown获取,所以在keypress中屏蔽了这些功能按键。
   keydown(e):主要是实现了对功能按键的获取。
   keyup(e):展示截获的字符串。

代码基本上就算实现完成了!呵呵