js键盘事件全面控制

主要分四个部分
第一部分：浏览器的按键事件
第二部分：兼容浏览器
第三部分：代码实现和优化
第四部分：总结

第一部分：浏览器的按键事件

用js实现键盘记录，要关注浏览器的三种按键事件类型，即keydown，keypress和keyup，它们分别对应onkeydown、 onkeypress和onkeyup这三个事件句柄。一个典型的按键会产生所有这三种事件，依次是keydown，keypress，然后是按键释放时候的keyup。

在这3种事件类型中，keydown和keyup比较底层，而keypress比较高级。这里所谓的高级是指，当用户按下shift + 1时，keypress是对这个按键事件进行解析后返回一个可打印的“!”字符，而keydown和keyup只是记录了shift + 1这个事件。[1]

但是keypress只能针对一些可以打印出来的字符有效，而对于功能按键，如F1-F12、Backspace、Enter、Escape、 PageUP、PageDown和箭头方向等，就不会产生keypress事件，但是可以产生keydown和keyup事件。然而在FireFox中，功能按键是可以产生keypress事件的。

传递给keydown、keypress和keyup事件句柄的事件对象有一些通用的属性。如果Alt、Ctrl或Shift和一个按键一起按下，这通过事件的altKey、ctrlKey和shiftKey属性表示，这些属性在FireFox和IE中是通用的。

第二部分：兼容浏览器

凡是涉及浏览器的js，就都要考虑浏览器兼容的问题。
目前常用的浏览器主要有基于IE和基于Mozilla两大类。Maxthon是基于IE内核的，而FireFox和Opera是基于Mozilla内核的。

2.1 事件的初始化

首先需要了解的是如何初始化该事件，基本语句如下：

　　 function keyDown(){}
　　 document.onkeydown = keyDown;

当浏览器读到这个语句时，无论按下键盘上的哪个键，都将呼叫KeyDown()函数。

2.2 FireFox和Opera的实现方法

FireFox和Opera等程序实现要比IE麻烦，所以这里先描述一下。

keyDown()函数有一个隐藏的变量--一般的，我们使用字母“e”来表示这个变量。  
  
　　 function keyDown(e)   
  
变量e表示发生击键事件，寻找是哪个键被按下，要使用which这个属性：  
  
　　 e.which   
  
e.which将给出该键的索引值，把索引值转化成该键的字母或数字值的方法需要用到静态函数String.fromCharCode()，如下：  
  
　　 String.fromCharCode(e.which)   
  
把上面的语句放在一起，我们可以在FireFox中得到被按下的是哪一个键：  
  
　　 function keyDown(e) {  
　　   　　   var keycode = e.which;  
　　 　　    var realkey = String.fromCharCode(e.which);  
　　 　　    alert("按键码: " + keycode + " 字符: " + realkey);  
　　    }
　　   document.onkeydown = keyDown;

2.3 IE的实现方法

IE的程序不需要e变量，用window.event.keyCode来代替e.which，把键的索引值转化为真实键值方法类似：String.fromCharCode(event.keyCode)，程序如下：  
  
　　     function keyDown() {  
　　　　      var keycode = event.keyCode;  
　　　　      var realkey = String.fromCharCode(event.keyCode);  
　　   　　     alert("按键码: " + keycode + " 字符: " + realkey);  
　　     }  
　　     document.onkeydown = keyDown;

2.4 判断浏览器类型

上面了解了在各种浏览器里是如何实现获取按键事件对象的方法，那么下面需要判断浏览器类型，这个方法很多，有比较方便理解的，也有很巧妙的办法，先说一般的方法：就是利用navigator对象的appName属性，当然也可以用userAgent属性，这里用appName来实现判断浏览器类型，IE和 Maxthon的appName是“Microsoft Internet Explorer” ,而FireFox和Opera的appName是“Netscape”，所以一个功能比较简单的代码如下：

　　     function keyUp(e) {   
　　     　　 if(navigator.appName == "Microsoft Internet Explorer")
　　      　　 {
　　      　　    　　var keycode = event.keyCode;  
　　      　　    　　var realkey = String.fromCharCode(event.keyCode);  
　　     　　    }else
　　     　　   {
　　     　　   　　    var keycode = e.which;  
　　     　　 　 　   var realkey = String.fromCharCode(e.which);  
　　    　　    }
　　    　　   alert("按键码: " + keycode + " 字符: " + realkey);
　　   　}
　　      document.onkeyup = keyUp;

比较简洁的方法是[2]：

　　      function keyUp(e) {
　　       　 var currKey=0,e=e||event;
　　      　   currKey=e.keyCode||e.which||e.charCode;
　　      　　var keyName = String.fromCharCode(currKey);
　　       　 alert("按键码: " + currKey + " 字符: " + keyName);
　　       }
　　       document.onkeyup = keyUp;

上面这种方法比较巧妙，简单地解释一下：
首先，e=e||event;这句代码是为了进行浏览器事件对象获取的兼容。js中这句代码的意思是，如果在FireFox或Opera中，隐藏的变量e是存在的，那么e||event返回e，如果在IE中，隐藏变量e是不存在，则返回event。
其次，currKey=e.keyCode||e.which||e.charCode;这句是为了兼容浏览器按键事件对象的按键码属性（详见第三部分），如IE中，只有keyCode属性，而FireFox中有which和charCode属性，Opera中有keyCode和which属性等。

上述代码只是兼容了浏览器，获取了keyup事件对象，简单的弹出了按键码和按键的字符，但是问题出现了，当你按键时，字符键都是大写的，而按shift键时，显示的字符很奇怪，所以就需要优化一下代码了。

第三部分：代码实现和优化

3.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。

3.2 用keydown/keyup还是keypress

第一部分已经介绍了keydown/keyup和keypress的区别，有一条比较通用的规则，keydown事件对于功能按键来说是最有用的，而keypress事件对于可打印按键来说是最有用的[3]。

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

3.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.getElementByIdx_x(s)?document.getElementByIdx_x(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)：展示截获的字符串。

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

第四部分：总结

编写代码的最初目的是能够通过js记录按键，并返回一个字符串。

上述代码只是用js实现了基本的英文按键记录，对于汉字是无能为力，记录汉字，我能想到的办法，当然是用js，是用keydown和keyup记录底层按键事件，汉字解析当然无能为力。当然你可以用DOM的方式直接获取input中的汉字，但这已经离开了本文讨论的用按键事件实现按键记录的本意。

上述代码还可以实现添加剪切板的功能，监控删除的功能等等。。。

js键盘事件全面控制的更多相关文章

  1. js键盘事件全面控制详解

      js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...

  2. js键盘事件全面控制详解【转】

    js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...

  3. Js键盘事件全面控制，回车按键事件，键盘对应按键码，按键事件兼容各个浏览器。

    在网上查询的按键码如下: 一.键盘按键和键盘对应代码表:   字母按键码A <--------> 65 B <--------> 66 C <--------> 6 ...

  4. JavaScript键盘事件全面控制代码

    JavaScript键盘事件全面控制,它可以捕获键盘事件的输入状态,可以判断你敲打了键盘的那个键,ctrl.shift,26个字母等等,返回具体键盘值. <html> <head&g ...

  5. js键盘事件和焦点事件

    键盘事件onkeydown //当键盘按下的时候触发onkeyup //但键盘抬起的时候触发event.keyCode //数字类型 键盘按键的键值功能键 ctrlkey shiftkey altke ...

  6. JS键盘事件对象之keyCode、charCode、which属性对比

    先说一些有关键盘事件的事项:用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown. onkeypress和onkeyup这 ...

  7. 关于js键盘事件的例子

    JavaScript onkeydown 事件 用户按下一个键盘按键时会触发 onkeydown 事件.与 onkeypress事件不同的是,onkeydown 事件是响应任意键按下的处理(包括功能键 ...

  8. js键盘事件

    弱鸡今天在写键盘事件,发生一个小bug,排查了1小时(">皿<)可恶的浏览器竟然还不报错!!原因是将e.ctrlKey写成了e.ctrLKey,o(ﾟДﾟ)っ 想想都要生气< ...

  9. 2018.12/6 js键盘事件 DOM：0级2级

    DOM0级事件元素绑定多个click最后只执行最后一个click. DOM2级事件元素绑定多个click,都要执行 注意当绑定的多个事件名,函数名,事件发生阶段三者完全一样时,才执行最后一个 div. ...

随机推荐

  1. PHP中的数组（一）

    一.数组的概述    1.数组的本质:管理和操作一组变量    2.数组是复合类型    3.数组中可以存储任意长度的数据,也可以存储任意类型的数据    4.数组就可以完成其它语言数据结构的功能(链 ...

  2. iOS app的破解原理，就是去除已付费的账户信息的原理是什么？

    正规的应用程序(IPA 格式,官方软件店发布)在被 iTunes 同步到 iPhone 的时候会调用系统进程 INSTALLD 对应用程序进行证书校验(GPLv3 授权)而这个证书本身是由官方捆绑在应 ...

  3. Unity3D ShaderLab 布料着色器

    Unity3D ShaderLab布料着色器 布料着色器是我们在虚拟现实中经常使用的着色器.本篇就来完成一个较为简单的布料着色器. 新建Shader,Material,InteractiveCloth ...

  4. HDU 5067

    http://acm.hdu.edu.cn/showproblem.php?pid=5067 规定起点和终点的tsp问题,解法依然是状态压缩dp,在初始化和计算答案的时候略做改动即可 #include ...

  5. 重学STM32----（一）

    在这学习stm32半年的时间中,虽然明显的感觉到自己在进步,但是还是发现学习方法的错误.由于急功近利的性格,在学习stm32之初,我选择了最简单的办法,用库函数来写程序,而且也由于我这急功近利的性格, ...

  6. Android FM模块学习之一 FM启动流程

    最近在学习FM模块,FM是一个值得学习的模块,可以从上层看到底层. 上层就是FM的按扭操作和界面显示,从而调用到FM底层驱动来实现广播收听的功能. FM启动流程:如下图: 先进入FMRadio.jav ...

  7. matlab自带princomp(PCA降维方式)

    matlab 中自带的函数就不必怀疑. princomp:principal componet analysis (PCA). [COEFF,SCORE,latent,tsquare]=princom ...

  8. C# 控件聚焦

    /********************************************************************** * C# 控件聚焦 * 说明: * 做界面经常需要将ta ...

  9. 解决织梦标签artlist不能调用副栏目的问题？

    本文转自:http://www.xinshou5.com/a/127.html 织梦列表页中不支持artlist这个标签,这样怎么调用副栏目? 想要在列表页调用副栏目,但是列表页不支持artlist这 ...

  10. Hashing filters for very fast massive filtering

    If you have a need for thousands of rules, for example if you have a lot of clients or computers, al ...