JavaScript键盘事件侦听

   在使用JavaScript做WEB键盘事件侦听捕获时，主要采用onkeypress、onkeydown、onkeyup三个事件进行出来。该三个事 件的执行顺序如下：onkeydown -> onkeypress ->onkeyup。
在一般情况下，采用三种键盘事件均可对键盘输入进行有效的响应。实际使用过程中的差别如下:
 
onkeypress事件不能对系统功能键(例如：后退、删除等，其中对中文输入法不能有效响应)进行正常的响应，
onkeydown和onkeyup均可以对系统功能键进行有效的拦截，但事件截获的位置不同，可以根据具体的情况选择不同的键盘事件。
 
由于onkeypress不能对系统功能键进行捕获，导致window.event对象的keyCode属性和onkeydown，onkeyup键盘事 件中获取的keyCode属性不同，主要表现在一下两点：
onkeypress事件的keyCode对字母的大小写敏感，而onkeydown、onkeyup事件 不敏感；
onkeypress事件的keyCode无法区分主键盘上的数字键和付键盘数字键的，而onkeydown、onkeyup的keyCode对 主付键盘的数字键敏感;
 
实现代码摘自：http://www.cnblogs.com/xiaoao808/archive/2008/07/31/1257624.html
 
方法一：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>检测大写锁定键</title>

<style type="text/css">

<!--

*{margin:0;padding:0;}

body{padding:2em;background:#242424;color:#ccc;}

h1{text-align:center;line-height:200%;}

h3{text-indent:1em;line-height:160%;color:#666;font-weight:normal;font-size:1em;}

h3 a{color:#bbb; text-decoration:none;margin:0 0.5em;}

h3 a:hover{color:#fff;}

p{margin:5em;}

span{margin:0 0.5em;font-size:85.7%;}

-->

</style>

</head> 

<body>

<h1>检测大写锁定键        </h1>

<form action="#" method="post">

<p><label for="password">密码：</label><input type="password" id="password" name="password" /><span style="display:none;">大写锁定键被按下，请注意大小写</span></p>

</form>

<script type="text/javascript">

//<![CDATA[

function  detectCapsLock(event){

    var e = event||window.event;

    var o = e.target||e.srcElement;

    var oTip = o.nextSibling;

    var keyCode  =  e.keyCode||e.which; // 按键的keyCode

    var isShift  =  e.shiftKey ||(keyCode  ==   16 ) || false ; // shift键是否按住

     if (

     ((keyCode >=   65   &&  keyCode  <=   90 )  &&   !isShift) // Caps Lock 打开，且没有按住shift键

     || ((keyCode >=   97   &&  keyCode  <=   122 )  &&  isShift)// Caps Lock 打开，且按住shift键

     ){oTip.style.display = '';}

     else{oTip.style.display  =  'none';}

}

document.getElementById('password').onkeypress = detectCapsLock;

//]]>

</script>

</body>

</html>

#######################################################################################################################
方法二：

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>  Detect Caps Lock </TITLE>

<script>

function  detectCapsLock(e){

   valueCapsLock  =  e.keyCode ? e.keyCode:e.which; // Caps Lock　是否打开

   valueShift  =  e.shiftKey ? e.shiftKey:((valueCapsLock  ==   16 ) ? true : false ); // shift键是否按住  

    if (((valueCapsLock >=   65   &&  valueCapsLock  <=   90 )  &&   ! valueShift) // Caps Lock 打开，并且 shift键没有按住

    || ((valueCapsLock >=   97   &&  valueCapsLock  <=   122 )  &&  valueShift)) // Caps Lock 打开，并且按住 shift键

       document.getElementById('capStatus').style.visibility  =  'visible';

    else

       document.getElementById('capStatus').style.visibility  =  'hidden';  

  /*

 javascript中keyCode代码对应表

 event.keyCode=32        空格

 event.keyCode=13        回车

 event.keyCode=27        Esc

 event.keyCode=16)        Shift

 event.keyCode=17)        Ctrl

 event.keyCode=18)        Alt

  */   

}

</script>

</HEAD>   

<BODY>

<input  type ="password"  name ="pwd"  onkeypress ="detectCapsLock(event)"   />

<div  id ="capStatus"  style ="visibility:hidden"><font  color =red> Caps Lock is on. <font></div>

</BODY>

</HTML>

js监控键盘大小写事件的更多相关文章

  1. Atitit.js的键盘按键事件捆绑and事件调度

    Atitit.js的键盘按键事件捆绑and事件调度 1. Best的方法还是 objEvtMap[ id+evt ]=function(evt,element) 2. Event bind funct ...

  2. js 监控浏览器关闭事件

    代码如下: <!DOCTYPE html> <html> <head> <title>监控浏览器关闭事件</title> </head ...

  3. 【JS】键盘鼠标事件

    一,键盘 keydown 表示按下键盘 keypress 表示按下键盘 keyup 表示键盘弹起 这三者的区别分别表现在发生的 先后顺序,获取到的键盘按钮值,已经对输入框的文本取值这三方面 先后顺序: ...

  4. js(鼠标键盘拖动事件)

    拖动事件是h5(HTML5的) 1:draggable(true) 2:拖动源 ondragstart ,ondragend 3:目的地 ondraglenter,ondragover,ondragl ...

  5. js对键盘输入事件绑定到特定按钮

    转自:https://www.cnblogs.com/liluping860122/archive/2013/05/25/3099103.html<script type="text/ ...

  6. [转] js对键盘输入事件绑定到特定按钮。

    <script type="text/javascript" language="javascript"> document.onkeyup = f ...

  7. js模拟键盘按键事件

    var WshShell = new ActiveXObject('WScript.Shell') WshShell.SendKeys('{ }'); 说明:大括号内的是键盘上的按键如: 空格:{ } ...

  8. js监控视频播放的事件并打印log

    html代码: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" ...

  9. js监控鼠标滚动事件

    //滚动动画 windowAddMouseWheel(); function windowAddMouseWheel() { var scrollFunc = function (e) { e = e ...

随机推荐

  1. Android按钮式进度条

    package com.example.progress.demo; import android.annotation.SuppressLint; import android.content.Co ...

  2. bzoj3223 Tyvj 1729 文艺平衡树（Splay Tree+区间翻转）

    3223: Tyvj 1729 文艺平衡树 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 2202  Solved: 1226[Submit][Sta ...

  3. Change ugly fonts in Firefox (KDE)

    When you use KDE the fonts in Firefox are ugly. This is the fix: Open with Kate: /home/yourusername/ ...

  4. HDU 4800/zoj 3735 Josephina and RPG 2013 长沙现场赛J题

    第一年参加现场赛,比赛的时候就A了这一道,基本全场都A的签到题竟然A不出来,结果题目重现的时候1A,好受打击 ORZ..... 题目链接:http://acm.hdu.edu.cn/showprobl ...

  5. DNA repair - HDU 2457（自动机+dp）

    题目大意:给你N个DNA的串,也就是至包含'A','T','G','C'四种碱基的,这些给定的串都是带有遗传病的,然后给你一个不会超过1000的串,问你至少几个地方才能让这个串不包含遗传病,如果不论怎 ...

  6. Dolls - 4160（简单二分图匹配）

    题意:有一些箱子,大箱子可以套小箱子,但是必须h>h,w>w,l>l,求出来最外面能剩下几个箱子无法被嵌套.   分析:思考每个箱子都只会被别的箱子套一次,所以构成一二分匹配模型,只 ...

  7. hdu 4640 Island and study-sister（状态压缩dp）

    先处理前两个学长到达各个点所需要的最少时间,在计算前两个学长和最后一个学长救出所有学妹的最少时间. #include<stdio.h> #include<string.h> # ...

  8. angularJS constant和value

    angularJS可以通过constant(name,value)和value(name,value)对于创建服务也是很重要的. 相同点是:都可以接受两个参数,name和value. 区别: 1.co ...

  9. SCOI2015酱油记

    Orz怒跪ns高一进A队,常规还是年级rank1,把gerw都下了一跳. Day1还是拿了点分的,调了半天T3终于调出来了(果然xlk大神可信),加上T1暴力有120(跟爆蛋有什么区别).T1大概有2 ...

  10. js~一个列表中包含上移下移删除等功能

    最近做了一个项目,包括了一个列表页,为了用户体验,操作均使用JS实现,其中包括在列表中实现上移,下移,删除等功能,前台JS,后端数据修改使用AJAX,本文主要说一下前台JS这块 先看一下页面的截图