输入密码检测大写是否锁定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 相关文章推荐
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
Aug 19 Javascript
两个DIV等高的JS的实现代码
Dec 23 Javascript
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 Javascript
node.js中的fs.fstatSync方法使用说明
Dec 15 Javascript
javascript 中的 delete及delete运算符
Nov 15 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
Mar 01 Javascript
JavaScript数据结构之二叉树的删除算法示例
Apr 13 Javascript
利用node.js本地搭建HTTP服务器
Apr 19 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 Javascript
Angular4 反向代理Details实践
May 30 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
Aug 31 Javascript
javascript如何实现create方法
Nov 04 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
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
Zend Framework教程之Zend_Form组件实现表单提交并显示错误提示的方法
2016/03/21 PHP
基于PHP生成简单的验证码
2016/06/01 PHP
javascript radio 联动效果
2009/03/04 Javascript
为调试JavaScript添加输出窗口的代码
2010/02/07 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
Node.js实现批量去除BOM文件头
2014/12/20 Javascript
JavaScript版的TwoQueues缓存模型
2014/12/29 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
JavaScript使用ZeroClipboard操作剪切板
2017/05/10 Javascript
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
JS实现的判断方法、变量是否存在功能示例
2020/03/28 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
快速了解Python开发环境Spyder
2020/06/29 Python
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
数百万免费的图形资源:Freepik
2020/09/21 全球购物
.NET面试题:什么是值类型和引用类型
2016/01/12 面试题
初中同学聚会感言
2014/02/11 职场文书
保证书范文大全
2014/04/28 职场文书
小学课外活动总结
2014/07/09 职场文书
关于感恩的演讲稿800字
2014/08/26 职场文书
个人公司授权委托书范本
2014/10/12 职场文书
运动会表扬稿范文
2015/05/05 职场文书
文艺晚会开场白
2015/05/29 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
大学生社会服务心得体会
2016/01/22 职场文书
Redis集群的关闭与重启操作
2021/07/07 Redis
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS
Python 匹配文本并在其上一行追加文本
2022/05/11 Python
Android中的Launch Mode详情
2022/06/05 Java/Android