js键盘事件全面控制详解
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 = keyD
当浏览器读到这个语句时，无论按下键盘上的哪个键，都将呼叫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 =
　　 　　&&& var
String.fromCharCode(e.which);&&
　　 　　&&&
alert("按键码: " + keycode + " 字符: " +
realkey);&&
　　&& document.onkeydown =
2.3 IE的实现方法
IE的程序不需要e变量，用window.event.keyCode来代替e.which，把键的索引值转化为真实键值方法类似：String.fromCharCode(event.keyCode)，程序如下：&&
function keyDown() {&&
var keycode =
event.keyC&&
var realkey =
String.fromCharCode(event.keyCode);&&
alert("按键码: " + keycode + " 字符: " +
realkey);&&
document.onkeydown = keyD
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.keyC&&
　　&&& 　　var
String.fromCharCode(event.keyCode);&&
　　&&& var
keycode = e.&&
　　 　 　&& var realkey =
String.fromCharCode(e.which);&&
　　&& alert("按键码: " + keycode + "
字符: " + realkey);
　　&& 　}
document.onkeyup = keyUp;
比较简洁的方法是[2]：
function keyUp(e) {
　　&&&&&&
　 var currKey=0,e=e||
currKey=e.keyCode||e.which||e.charC
　　var keyName = String.fromCharCode(currKey);
　　&&&&&&
　 alert("按键码: " + currKey + " 字符: " + keyName);
　　&&&&&&
　　&&&&&&
document.onkeyup = keyUp;
上面这种方法比较巧妙，简单地解释一下：
首先，e=e||这句代码是为了进行浏览器事件对象获取的兼容。js中这句代码的意思是，如果在FireFox或Opera中，隐藏的变量e是存在的，那么e||event返回e，如果在IE中，隐藏变量e是不存在，则返回event。
其次，currKey=e.keyCode||e.which||e.charC这句是为了兼容浏览器按键事件对象的按键码属性（详见第三部分），如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"&
&HEAD&&TITLE&js
按键记录&/TITLE&
&META NAME="Generator"
CONTENT="EditPlus"&
&META NAME="Author"
CONTENT="羽殇仁"&
&META NAME="Keywords" CONTENT="js
按键记录"&
&META NAME="Description" CONTENT="js 按键
&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||
currKey=e.keyCode||e.which||e.charC
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 =
&& 　 　 default:keyName =
String.fromCharCode(currKey);
　 keystring += keyN
function keydown(e)
　 var e=e||
　 var currKey=e.keyCode||e.which||e.charC
if((currKey&7&&currKey&14)||(currKey&31&&currKey&47))
　 　&& switch(currKey)
&& 　 　 {
&&& 　 　 　 case
8: keyName = "[退格]";
&&& 　 　 　 case
9: keyName = "[制表]";
&&& 　 　 　 case
13:keyName = "[回车]";
&&& 　 　 　 case
32:keyName = "[空格]";
&&& 　 　 　 case
33:keyName = "[PageUp]";&&
&&& 　 　 　 case
34:keyName = "[PageDown]";&&
&&& 　 　 　 case
35:keyName = "[End]";&&
&&& 　 　 　 case
36:keyName = "[Home]";&&
&&& 　 　 　 case
37:keyName = "[方向键左]";&&
&&& 　 　 　 case
38:keyName = "[方向键上]";&&
&&& 　 　 　 case
39:keyName = "[方向键右]";&&
　&& case 40:keyName =
"[方向键下]";&&
&&& 　 　 　 case
46:keyName = "[删除]";&&
&&& 　 　 　
default:keyName =
　 　&& keystring += keyN
　 $("content").innerHTML=
function keyup(e)
　 $("content").innerHTML=
document.onkeypress=
document.onkeydown =
document.onkeyup =
&input type="text" /&
&input type="button" value="清空记录"
onclick="$('content').innerHTML = '';keystring =
&br/&请按下任意键查看键盘响应键值：&span
id="content"&&/span&
代码分析：
$()：根据ID获取dom
keypress(e)：实现对字符码的截获，由于功能按键要用keydown获取，所以在keypress中屏蔽了这些功能按键。
keydown(e)：主要是实现了对功能按键的获取。
keyup(e)：展示截获的字符串。
代码基本上就算实现完成了！呵呵
第四部分：总结
编写代码的最初目的是能够通过js记录按键，并返回一个字符串。
上述代码只是用js实现了基本的英文按键记录，对于汉字是无能为力，记录汉字，我能想到的办法，当然是用js，是用keydown和keyup记录底层按键事件，汉字解析当然无能为力。当然你可以用DOM的方式直接获取input中的汉字，但这已经离开了本文讨论的用按键事件实现按键记录的本意。
上述代码还可以实现添加剪切板的功能，监控删除的功能等等。。。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。您是否在找:
js 触发键盘事件-用js怎么写一个回车键盘事件 js怎样主动触发键盘事件 js怎样主动触发键盘事件
新盟 曼巴狂蛇机械手感键盘鼠标套装游戏笔记本台式电脑有线键鼠59.90售出：0件
猎狐有线键盘鼠标套装家用办公游戏台式电脑笔记本通用USB接口19.90售出：0件
牧马人真机械手感键盘鼠标耳机三件套装 有线发光游戏金属背光lol69.90售出：0件
优想 机械手感键盘鼠标套装USB有线背光台式电脑游戏电竞lol网吧39.90售出：0件
灵逸黑寡妇 游戏机械键盘黑轴青轴红轴台式电脑笔记本有线87键10489.00售出：0件
都市方圆无线键盘鼠标套装 笔记本电脑键鼠套件游戏办公家用悬浮29.80售出：0件
狼蛛收割者机械键盘青轴黑轴红轴茶轴游戏台式电脑笔记本有线lol119.00售出：0件
联想戴尔笔记本有线键盘办公室用USB接口台式电脑笔记本通用KB10114.90售出：0件
新盟 机械键盘鼠标套装青轴黑轴红轴茶轴牧马人游戏电脑有线键鼠149.00售出：0件
狼途牧马人机械键盘鼠标套装青轴黑轴有线电脑游戏键鼠外设lol139.90售出：0件
摩箭机械手感键盘鼠标套装背光有线键鼠游戏电竞网吧lol台式电脑49.90售出：0件
聆点键盘有线USB台式机笔记本办公网吧游戏家用防水电脑键盘包邮29.90售出：0件
雷柏8200P 无线鼠标键盘套装 静音防水省电 电脑游戏轻薄无线键鼠99.00售出：0件
狼途金属机械手感键盘台式电脑笔记本外接家用有线游戏电竞外设39.90售出：0件
德意龙黑暗骑士无线键盘鼠标套装笔记本台式电脑键鼠家用办公游戏29.90售出：0件
电脑有线发光游戏机械手感键盘鼠标套装笔记本台式键鼠耳机三件套55.90售出：0件
猎狐家用办公游戏键盘笔记本台式电脑通用USB防水有线键盘商务14.80售出：0件
聆点牧马人背光机械家用笔记本办公游戏有线键盘鼠标套装台式电脑34.90售出：0件
黑爵战警 游戏机械键盘青轴黑轴红轴茶轴蒸汽朋克复古金属键盘119.00售出：0件
K1808巧克力键盘超薄有线办公家用游戏静音防水外接无线彩色全USB32.90售出：0件
如意鸟机械手感键盘鼠标耳机三件套装牧马人有线电脑台式金属游戏49.80售出：0件
双飞燕KB-8有线游戏键盘USB笔记本台式机电脑键盘网吧办公用家用48.00售出：0件
达尔优机械键盘黑轴青轴合金3代ek815有线金属lol背光游戏87 104149.00售出：0件
海志有线键盘鼠标套装USB接口台式电脑笔记本家用办公游戏键鼠19.90售出：0件
赛德斯机械键盘鼠标套装青轴 牧马人游戏键鼠miss小苍小智外设店159.00售出：0件
都市方圆机械手感金属背光游戏有线键盘台式电脑笔记本USB悬浮LOL29.80售出：0件
优想无线键盘鼠标套装办公家用轻薄静音巧克力电脑台式笔记本防水49.90售出：0件
HP/惠普cs300 无线键盘鼠标套装笔记本电脑无线键鼠轻薄静音游戏69.00售出：0件
雷柏V500游戏机械键盘有线黑轴青轴合金87键台式电脑笔记本LOL99.00售出：0件
BOW航世 巧克力无线键盘鼠标套装 笔记本台式电脑充电小键鼠静音89.00售出：0件
usb电脑键盘有线 台式机办公家用健盘小笔记本普通打字通用型接口12.80售出：0件
牧马人真机械手感键盘鼠标耳机三件套装有线电脑游戏键鼠电竞lol59.00售出：0件
暴虎A9键盘鼠标套装机械手感游戏有线键鼠笔记本台式电脑网吧lol49.90售出：0件
真机械手感键盘鼠标耳机三件套装牧马人有线发光电脑游戏电竞键鼠99.00售出：0件
DNF专用台式机电脑游戏键盘无声静音 金属机械手感有线笔记本外接49.90售出：0件
罗技MK235无线键盘鼠标套装防泼溅省电办公游戏薄款无线键鼠套装99.00售出：0件
罗技K120有线键盘有线USB电脑台式笔记本家用办公游戏防水键盘45.00售出：0件
js 触发键盘事件的相关文章
用js怎么写一个回车键盘事件
答： document.onkeydown=function(event){ var e = event || window.event || arguments.callee.caller.arguments[0]; if(e && e.keyCode==27){ // 按 Esc //要做的事情 } if(e && e.keyCode==113){ // 按 F2 //要做的事情 } if(e && e.keyCode==13
js怎样主动触发键盘事件
答：键盘事件，是需要根据键盘是否有操作，才触发的， 1、keydown() keydown 事件会在键盘按下时触发。 2、keypress() keypress 事件会在敲击按键时触发，我们可以理解为按下并抬起同一个按键。 3、keyup() keyup 事件会在按键释放时触发，也就是你
js怎样主动触发键盘事件
答：document.onkeydown=function(event){ var e = event || window.event || arguments.callee.caller.arguments[0]; if(e && e.keyCode==27){ // 按 Esc //要做的事情 } if(e && e.keyCode==113){ // 按 F2 //要做的事情 } if(e && e.keyCode==13)
js键盘事件的使用
问：方向键，的事件怎么操作， 就是按一下方向键执行一个函数 on???=functio
答：用js实现键盘记录，要关注浏览器的三种按键事件类型，即keydown，keypress和keyup，它们分别对应onkeydown、 onkeypress和onkeyup这三个事件句柄。一个典型的按键会产生所有这三种事件，依次是keydown，keypress，然后是按键释放时候的keyup。
js之键盘事件
问：如图：按左往左移动，按右往右移动。。。。。。这上下左右键盘事件怎么写。
答：document.onkeydown=function(k){ document.getElementById("div").style.position="relative"; var left = document.getElementById("div").offsetL var top = document.getElementById("div").offsetT var code = k.keyC if(code==
如何用js或jquery实现点击事件触发键盘
问：例如 1）input type="submit" value="曾大" id="a" / 点击实现页面缩
答：当按钮被按下时，发生 keydown 事件。 keydown() 方法触发 keydown 事件，或规定当发生 keydown 事件时运行的函数。 语法 $(selector).keydown(function) 例如： $(document).keydown(function(event){alert(event.keyCode);//弹出按键的对应值 });
如何用js或jquery实现点击事件触发键盘
答：$(document).keydown(function(event){ alert(event.keyCode); if(event.keyCode == '13'){ alert('您输入的是回车键！'); $('#hello').click(); }});
js按下键盘一个键 和 组合键 触发事件。
问：1.按下键盘上tab键 2.按下Shift+/(?键) 触发事件。 要求在打开的网页任
答：参考一下吧 ，稍作修改就可以满足1、2两个条件 但是IE的键盘监听最多只能作用于document上（window我试过不行） 如果内嵌了iframe并且你的焦点在iframe上，那么按键无效 document.onkeydown = function() { var oEvent = window. if (oEve
js触发键盘事件，比如发送空格按键事件?
答：keydown 事件中用ASCII码判断是否是空格键
JS求助，键盘事件和单击事件，限制只执行一次
问：源码如下： $(document).keyup(handler); $('#start').click(handler);
答：有很多方法，例如只要加个变量开关或属性开关就行了，也可以直接使用jquery的one方法。 示例 $().one('keyup',function(){ . })
买就要买真品，js 触发键盘事件-用js怎么写一个回车键盘事件 js怎样主动触发键盘事件 js怎样主动触发键盘事件。
本站为您精选的2017最新产品，均来自网络商城和各大知名大型购物网站，100%正品包邮，请放心购买
您看中哪款，可以直接点击进入官网或相应的旗舰专卖店购买,如发现侵权，请及时联系我们删除
&copy团乐购
<img src="" width="0" height="0"/>[求教]如何在js中识别键盘某个键长按？ - 饮水思源
饮水思源 - 主题文章阅读　　[讨论区: WebDevelop]本主题共有 4 篇文章，分 1 页, 当前显示第 1 页 []
[][] 发信人: dwrx (dwrx-rx--x), 信区: WebDevelop
题: [求教]如何在js中识别键盘某个键长按？
发信站: 饮水思源 (日10:55:07 星期四)
比如已经实现了按一次 向下方向键 的操做，然后希望长按 向下键 时能连续调用这个操
※ 来源:?饮水思源 bbs.?[FROM: 192.102.204.36]
[][] 发信人: (我决定再撒一个弥天大谎), 信区: WebDevelop
题: Re: [求教]如何在js中识别键盘某个键长按？
发信站: 饮水思源 (日10:56:43 星期四), 转信
keydown以后很久没有keyup
反复出现某个字符...
【 在 dwrx (dwrx-rx--x) 的大作中提到: 】
: 比如已经实现了按一次 向下方向键 的操做，然后希望长按 向下键 时能连续调用这个操
┌─scaret 的攒钱进度条 ──────────────────────┐
│┌─────────────────────────┐
│└─────────────────────────┘
│ Time Remaining:
[Donate] [Cancel]
└─────────────────────────────────┘
※ 来源:?饮水思源 bbs.?[FROM: 59.78.38.146]
[][] 发信人: dwrx (dwrx-rx--x), 信区: WebDevelop
题: Re: [求教]如何在js中识别键盘某个键长按？
发信站: 饮水思源 (日11:53:54 星期四)
oh 我发现如果长按 自然会一直触发keydown事件。。
【 在 scaret 的大作中提到: 】
: keydown以后很久没有keyup
: 反复出现某个字符...
: 【 在 dwrx (dwrx-rx--x) 的大作中提到: 】
: : 比如已经实现了按一次 向下方向键 的操做，然后希望长按 向下键 时能连续调用..
※ 来源:?饮水思源 bbs.?[FROM: 192.102.204.36]
[][] 发信人: yaboyang (要低俗), 信区: WebDevelop
题: Re: [求教]如何在js中识别键盘某个键长按？
发信站: 饮水思源 (日13:03:42 星期四), 转信
抓住一次事件后，不立即触发行为，给个延迟，看延迟内有没有下一个事件，然后决定
触发什么行为。我写扫雷时，这样实现过左右键双击。
【 在 dwrx (dwrx-rx--x) 的大作中提到: 】
: oh 我发现如果长按 自然会一直触发keydown事件。。
: 【 在 scaret 的大作中提到: 】
: : keydown以后很久没有keyup
: : 反复出现某个字符...
无论路的前方有没有命运存在，我们要做的是做出自己的选择。
※ 来源:?饮水思源 bbs.?[FROM: 58.246.57.66]
本主题共有 4 篇文章，分 1 页, 当前显示第 1 页 [][][]