js大小写锁判断
<html>
<head>
<title>CapsLock Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js" type="text/javascript" charset="utf-8"></script>
<script src="./CapsLock.js?ver=1.0" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
var pass = document.id('passcapsnotice'),
user = document.id('usercapsnotice'); function passCapsOn() { pass.setStyle('display', 'block'); }
function passCapsOff() { pass.setStyle('display', 'none'); } function userCapsOn() { user.setStyle('display', 'block'); }
function userCapsOff() { user.setStyle('display', 'none'); } document.id('username').addEvents({
'capsLockOn': userCapsOn,
'capsLockOff': userCapsOff,
'blur': userCapsOff,
'focus': function(event) {
if (event.hasCapsLock()) { userCapsOn(); }
}
}); document.id('password').addEvents({
'capsLockOn': passCapsOn,
'capsLockOff': passCapsOff,
'blur': passCapsOff,
'focus': function(event) {
if (event.hasCapsLock()) { passCapsOn(); }
}
}); });
</script>
<style type="text/css">
form {
width: 500px;
margin: 0 auto;
}
.label { width: 60px; }
.field { width: 260px; }
.notice {
display: none;
line-height: 2em;
margin-top: .5em;
padding: 0;
}
</style>
</head> <body>
<form>
<fieldset>
<legend>Login</legend>
<table>
<tbody>
<tr>
<td class="label"><label for="username">Username:</label></td>
<td class="field"><input type="text" id="username" name="username" class="title" /></td>
<td><span id="usercapsnotice" class="notice">Caps On.</span></td>
</tr>
<tr>
<td class="label"><label for="password">Password:</label></td>
<td class="field"><input type="password" id="password" name="password" class="title" /></td>
<td><span id="passcapsnotice" class="notice">Caps On.</span></td>
</tr>
</tbody>
</table>
</fieldset>
</form>
</body>
</html>
其中：
(function() {
Browser.CapsLock = null;
var capsOn = null,
target = (Browser.Engine.trident) ? document : window;
/**
* Figure out if caps lock is on by checking for a lower case letter with shift
* pressed or an uppercase letter without shift. Once we know if it is on/off,
* remove the event listener.
*/
function checkCapsKey(event) {
if (event.code > 64 && event.code < 91) { // Capital Letters
Browser.CapsLock = capsOn = (event.shift) ? null : true;
} else if (event.code > 96 && event.code < 123) { // Lower-case Letters
Browser.CapsLock = capsOn = (event.shift) ? true : false;
}
if (capsOn !== null) {
target.removeEvent('keypress', checkCapsKey);
}
}
/**
* If user moves away from the window, we can't tell what happened with the caps
* key when he returns so we reset the caps checker.
*/
window.addEvent('blur', function(event) {
Browser.CapsLock = capsOn = null;
target.addEvent('keypress', checkCapsKey);
});
/**
* Checks an event for caps lock key presses. If it's Safari 3+, keyup means caps lock
* is off and keydown means caps lock is on. Otherwise just toggle the value of capsOn.
*/
function checkCapsPress(event) {
if (event.code == 20 && capsOn !== null) {
if (Browser.Engine.webkit && Browser.Engine.version > 420) {
Browser.CapsLock = capsOn = (event.event.type == 'keydown');
} else {
if (event.event.type == 'keydown') {
Browser.CapsLock = capsOn = !capsOn;
}
}
}
}
/**
* Add events to the target to monitor for caps lock key presses and to do
* the initial caps lock key sniffing.
*/
target.addEvents({
'keyup': checkCapsPress,
'keydown': checkCapsPress,
'keypress': checkCapsKey
});
Event.implement({ hasCapsLock: function(event) { return capsOn; } });
Element.Events.capsLockOn = {
base: 'keydown',
condition: function(event) {
if (event.code == 20) {
if (Browser.Engine.webkit && Browser.Engine.version > 420) {
return true;
} else if (capsOn !== null) {
return !capsOn;
}
} else if (capsOn !== null) {
return event.hasCapsLock();
}
}
};
Element.Events.capsLockOff = {
base: (Browser.Engine.webkit) ? 'keyup' : 'keydown',
condition: function(event) {
if (event.code == 20) {
if (Browser.Engine.webkit && Browser.Engine.version > 420) {
return true;
} else if (capsOn !== null) {
return (capsOn === true);
}
} else if (capsOn !== null) {
return !event.hasCapsLock();
}
}
};
})();
js大小写锁判断的更多相关文章
- JS 中如何判断 undefined 和 null
JS 中如何判断 undefined JavaScript 中有两个特殊数据类型:undefined 和 null,下节介绍了 null 的判断,下面谈谈 undefined 的判断. 以下是不正确的 ...
- js 正则之 判断密码类型
原文:js 正则之 判断密码类型 今天没啥写的,就分享个思路吧.之前在群里讨论的时候,谢亮兄弟说判断密码是否是纯数字,纯字母之类的.如果用 , 条判断,那就老长一大段了.这个思路是我之前看 jQuer ...
- js常见的判断移动端或者pc端或者安卓和苹果浏览器的方法总结
1.js常见的判断移动端或者pc端或者安卓和苹果浏览器的方法总结 : http://www.haorooms.com/post/js_pc_iosandmobile 2.Js判断客户端是否为PC还是手 ...
- JS前端开发判断是否是手机端并跳转操作（小结）
JS前端开发判断是否是手机端并跳转操作(小结) 这篇文章主要介绍了JS前端开发判断是否是手机端并跳转操作,非常不错,具有参考借鉴价值,需要的朋友可以参考下 常用跳转代码 ? 1 2 3 4 5 6 7 ...
- JS用斜率判断鼠标进入DIV四个方向的方法 判断鼠标移入方向
本文要介绍的是一种鼠标从一个元素移入移出时,获取鼠标移动方向的思路.这个方法可以帮助你判断鼠标在移入移出时,是从上下左右的哪个方向发生的.这个思路,是我自己琢磨出来,利用了一点曾经高中学过的数学知识, ...
- JS中如何判断对象是对象还是数组
JS中如何判断对象是对象还是数组 一.总结 一句话总结:typeof Array.isArray === "function",Array.isArray(value)和Objec ...
- js之checkbox判断常用示例
checkbox常用示例可参考: 关于checkbox自动选中 checkbox选中并通过ajax传数组到后台接收 MP实战系列(十三)之批量修改操作(前后台异步交互) 本次说的是,还是关于智能门锁开 ...
- 160304-02、JS 中如何判断null 和undefined
JavaScript 中有两个特殊数据类型:undefined 和 null,下节介绍了 null 的判断,下面谈谈 undefined 的判断. 以下是不正确的用法: var exp = undef ...
- js正则表达式，判断字符串是否以数字组结尾，并取出结尾的数字
js正则表达式,判断字符串是否以数字组结尾,并取出结尾的数字 <!DOCTYPE html> <html> <head> <meta charset=&quo ...
随机推荐
- HTML5的绘图的支持
一.简单介绍canvas元素 <canvas.../>是HTML5新增的一个元素,该元素用于绘制图形.实际上<canvas../>只是相当于一张画布. 它除了可以指定通用属性外 ...
- isEmpty()
String a = new String(); 此时a是分配了内存空间,但值为空,是绝对的空,是一种有值(值存在为空而已) String b = ""; 此时b是分配了内存空间, ...
- 想买一套arduino玩玩
对于物联网,去年才接触,认识但不熟悉.做过一个项目,买了一块树莓派,看了一段网络电视. 最近被邀分享一些关于物联网的东西,翻了些大学公开课,很系统但太偏理论和框架.听了一个TED感觉很不错,但太精简. ...
- OpenGL学习之windows下安装opengl的glut库
OpenGL学习之windows下安装opengl的glut库 GLUT不是OpenGL所必须的,但它会给我们的学习带来一定的方便,推荐安装. Windows环境下的GLUT下载地址:(大小约为15 ...
- Asp.Net请求处理机制中IsApiRuntime解析
今天看了web请求的生命周期,看完了还有些不懂,就是用反编译工具,查看封装内库的内部实现. 从计算机内部查到web.dll,使用反编译工具打开 打开后 public int ProcessReques ...
- js静态属性和静态方法
啥也不说了,直接上代码...(就是这么任性) var Animal = function(){}; Animal.name = "dog"; var a = ...
- 阿里云ECS每天一件事D5：安装php5.4.34
原本是想把php和nginx合在一起来说的,不过考虑后,还是分开来做吧,已熟悉的更透彻一些. 1.准备类库 yum install autoconf automake libtool re2c fle ...
- stl 迭代子的失效
迭代子是STL中很重要的特性,但是其很脆弱(我个人认为),因为使用它的条件很苛刻,一不小心就失效了.其在两中情况下可能会失效. 1．当容器有插入操作时 在初始化了迭代子后,如果容器有插入操作时,迭代子 ...
- Java图形化界面设计——容器（JFrame）
Java图形化界面设计——容器(JFrame) 程序是为了方便用户使用的,因此实现图形化界面的程序编写是所有编程语言发展的必然趋势,在命令提示符下运行的程序可以让我们了解java程序的基本知识体系结构 ...
- .Net MVC 入门之Razor语法
Razor语法 Razor是以后MVC项目中都需要用的, 所以在学MVC的基础的时候,我们的目标:要了解熟悉Razor页面的语法结构,做到灵活使用,so我们马上开始学习Razor,也请你们多评论和推荐 ...