js监控键盘大小写事件

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>

转载于:https://www.cnblogs.com/noxy/p/5788612.html

js监控键盘大小写事件相关推荐

js捕获键盘事件之keydown、keyup以及keypress
js keyup.keypress和keydown事件都是有关于键盘的事件当一个按键被pressed 或released在每一个现代浏览器中,都可能有三种客户端事件. keydown event k ...
JS 监控页面刷新,关闭事件的方法（转载）
JS 监控页面刷新,关闭事件的方法(转载) 已有 149 次阅读 2011-8-30 11:37 |个人分类:web|系统分类:创意设计|关键词:JS,刷新,关闭都是为了学习-- onbefore ...
php接收键盘事件,js获取键盘事件的方法实例
本文主要和大家分享js获取键盘事件的方法实例,希望能帮助到大家. document.οnkeydοwn=function(event){ var e = event || window.event | ...
html鼠标键弹起事件,js鼠标按键事件和键盘按键事件用法实例汇总
本文实例讲述了js鼠标按键事件和键盘按键事件用法.分享给大家供大家参考,具体如下: keydown,keyup,keypress:属于你的键盘按键 mousedown,mouseup:属于你的鼠标按键 ...
python监控键盘按下事件_Python如何监控键盘按了什么键
Python如何监控键盘按了什么键 1.安装pynputpip install pynput # conda or py3 2.程序功能介绍这个程序是为了实现监听键盘操作,记录键盘输入的值,获取 1 ...
js取消键盘监听_JS键盘事件（非常详细）
在 JavaScript 中,当用户操作键盘时,会触发键盘事件,键盘事件主要包括下面 3 种类型: keydown:在键盘上按下某个键时触发.如果按住某个键,会不断触发该事件,但是 Opera 浏览器 ...
[转载]C#模拟键盘鼠标事件-SendKeys
C#模拟键盘鼠标事件-SendKeys 2007-09-18 15:138596人阅读评论(1)收藏举报 1.模拟键盘事件 System.Windows.Forms.SendKeys以下是 Sen ...
selenium java 滚动条_java+selenium使用JS、键盘滑动滚动条
本篇文章介绍如何使用JS和键盘对象对页面进行滑动滚动条-------------主要针对java做自动化测试的同学一:使用键盘对象操作滚动条 //导包 importorg.openqa.seleni ...
java弹窗触发事件_关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法...
好久没见了在项目中遇到一个小小的需求,总结了一下! 详细我就不介绍了,相信大家用过的话,很了解.详见文档-----------> http://element-cn.eleme.io/#/zh ...

js监控键盘大小写事件

JavaScript键盘事件侦听

js监控键盘大小写事件相关推荐

最新文章

热门文章