输入密码检测大写是否锁定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中call与apply的用法小结
Dec 28 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
基于socket.io和node.js搭建即时通信系统
Jul 30 Javascript
使用jQuery简单实现模拟浏览器搜索功能
Dec 21 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
jQuery实现3D文字特效的方法
Mar 10 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
Angular 输入框实现自定义验证功能
Feb 19 Javascript
原生JS实现导航下拉菜单效果
Nov 25 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
Oct 20 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 Javascript
深入解析vue 源码目录及构建过程分析
Apr 24 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者的疑难问答(2)
2006/10/09 PHP
Php注入点构造代码
2008/06/14 PHP
PHP面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
PHP pathinfo()获得文件的路径、名称等信息说明
2011/09/13 PHP
PHP防止跨域提交表单
2013/11/01 PHP
三种php连接access数据库方法
2013/11/11 PHP
PHP中调用SVN命令更新网站方法
2015/01/07 PHP
thinkphp整合微信支付代码分享
2016/11/24 PHP
PHP PDOStatement::fetchObject讲解
2019/02/01 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
代码详解JS操作剪贴板
2018/02/11 Javascript
详解js类型判断
2018/05/22 Javascript
100行代码实现vue表单校验功能(小白自编)
2019/11/19 Javascript
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
python 获取文件列表(或是目录例表)
2009/03/25 Python
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
Python调用服务接口的实例
2019/01/03 Python
解决PySide+Python子线程更新UI线程的问题
2019/01/11 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
django框架使用方法详解
2019/07/18 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
酷瑞网络科技面试题
2012/03/30 面试题
能否解释一下XSS cookie盗窃是什么意思
2012/06/02 面试题
关于母亲节的感言
2014/02/04 职场文书
《画杨桃》教学反思
2014/04/13 职场文书
迎七一演讲稿
2014/09/12 职场文书
房屋所有权证明
2014/10/20 职场文书
2015员工年度考核评语
2015/03/25 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技