输入密码检测大写是否锁定js实现代码


Posted in Javascript onDecember 03, 2012

这个月都还没。必须要凑数。
网站登录为了更好的用户体验都会在输入密码的时候检测是否开启大写。提醒用户。
在下面的 input框里测试下吧!这段代码来之 <点我>。
不过我做了一点小改进。
主要对 已经激活input框的 大写锁定进行实时检测。

<div> 
<input class="text" name="passwd" id="loginPasswd" type="password" style="*display:block;" /> 
<div style="color:#F90;padding:2px; position:absolute; display:none;" id="capital">大写锁定已开启</div> 
<script type="text/javascript"><!-- 
(function(){ 
var inputPWD = document.getElementById('loginPasswd'); 
var capital = false; 
var capitalTip = { 
elem:document.getElementById('capital'), 
toggle:function(s){ 
var sy = this.elem.style; 
var d = sy.display; 
if(s){ 
sy.display = s; 
}else{ 
sy.display = d =='none' ? '' : 'none'; 
} 
} 
} 
var detectCapsLock = function(event){ 
if(capital){return}; 
var e = event||window.event; 
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键 
){capitalTip.toggle('block');capital=true} 
else{capitalTip.toggle('none');} 
} 
inputPWD.onkeypress = detectCapsLock; 
inputPWD.onkeyup=function(event){ 
var e = event||window.event; 
if(e.keyCode == 20 && capital){ 
capitalTip.toggle(); 
return false; 
} 
} 
})() 
// --></script> 
</div>
Javascript 相关文章推荐
js版本A*寻路算法
Dec 22 Javascript
一款JavaScript压缩工具:X2JSCompactor
Jun 13 Javascript
js兼容标准的表格变色效果
Jun 28 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
May 09 Javascript
10个基于浏览器的JavaScript调试工具分享
Feb 07 Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
Dec 13 Javascript
详解vue.js组件化开发实践
Dec 14 Javascript
如何编写jquery插件
Mar 29 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
javascript基础进阶_深入剖析执行环境及作用域链
Sep 05 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
Nov 13 Javascript
js操作textarea 常用方法总结
Dec 03 #Javascript
javascript object array方法使用详解
Dec 03 #Javascript
让AJAX不依赖后端接口实现方案
Dec 03 #Javascript
Javascript在IE和FireFox中的不同表现简析
Dec 03 #Javascript
js+JQuery返回顶部功能如何实现
Dec 03 #Javascript
ajax异步刷新实现更新数据库
Dec 03 #Javascript
JavaScript代码复用模式实例分析
Dec 02 #Javascript
You might like
关于在php.ini中添加extension=php_mysqli.dll指令的说明
2007/06/14 PHP
Yii rules常用规则示例
2016/03/15 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
js计数器代码
2006/11/04 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
2010/10/29 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
2014/06/06 Javascript
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
将List对象列表转换成JSON格式的类实现方法
2016/07/04 Javascript
JavaScript循环_动力节点Java学院整理
2017/06/28 Javascript
React Router v4 入坑指南(小结)
2018/04/08 Javascript
微信小程序实现分享朋友圈的图片功能示例
2019/01/18 Javascript
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
原生JS与JQ获取元素的区别详解
2020/02/13 Javascript
Python中的rfind()方法使用详解
2015/05/19 Python
python实现将英文单词表示的数字转换成阿拉伯数字的方法
2015/07/02 Python
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
python中subprocess批量执行linux命令
2018/04/27 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
python解决js文件utf-8编码乱码问题(推荐)
2018/05/02 Python
Python实现的当前时间多加一天、一小时、一分钟操作示例
2018/05/21 Python
python批量创建指定名称的文件夹
2019/03/21 Python
Python3使用PySynth制作音乐的方法
2019/09/09 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
python轮询机制控制led实例
2020/05/03 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
彻底搞懂python 迭代器和生成器
2020/09/07 Python
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
超市促销实习自我鉴定
2013/09/23 职场文书
《湘夫人》教学反思
2014/02/21 职场文书
学校读书活动总结
2014/06/30 职场文书
年终晚会活动方案
2014/08/21 职场文书
回复函格式及范文
2015/07/14 职场文书