输入密码检测大写是否锁定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 相关文章推荐
JavaScript 精粹读书笔记(1,2)
Feb 07 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
Nov 25 Javascript
情人节之礼 js项链效果
Feb 13 Javascript
javascript实现3D切换焦点图
Oct 16 Javascript
详解基于Bootstrap扁平化的后台框架Ace
Nov 27 Javascript
Javascript发送AJAX请求实例代码
Aug 21 Javascript
微信小程序 wx.request(object) API详解及实例代码
Sep 30 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
Feb 10 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 Javascript
uni-app实现获取验证码倒计时功能
Nov 01 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
我的论坛源代码(十)
2006/10/09 PHP
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
PHP goto语句用法实例
2019/08/06 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
用javascript实现的支持lrc歌词的播放器
2007/05/17 Javascript
js 多浏览器分别判断代码
2010/04/01 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
NodeJS学习笔记之FS文件模块
2015/01/13 NodeJs
浅谈JS之iframe中的窗口
2016/09/13 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
2018/03/29 Javascript
浅谈PDF.js使用心得
2018/06/07 Javascript
关于js陀螺仪的理解分析
2019/04/11 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
2019/05/26 Javascript
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
Vue多选列表组件深入详解
2021/03/02 Vue.js
Python实现二叉搜索树
2016/02/03 Python
Python实现将sqlite数据库导出转成Excel(xls)表的方法
2017/07/17 Python
Python实现通讯录功能
2018/02/22 Python
python矩阵转换为一维数组的实例
2018/06/05 Python
windows下pycharm安装、创建文件、配置默认模板
2018/07/31 Python
django连接mysql配置方法总结(推荐)
2018/08/18 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
python如何支持并发方法详解
2020/07/25 Python
高级3D打印市场:Gambody
2019/12/26 全球购物
写一个用矩形法求定积分的通用函数
2012/11/08 面试题
医学院毕业生自荐信
2013/11/08 职场文书
实习生体会的自我评价范文
2013/11/28 职场文书
房地产项目合作意向书
2015/05/08 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
30岁前绝不能错过的10本书
2019/08/08 职场文书
解决Go gorm踩过的坑
2021/04/30 Golang
Python max函数中key的用法及原理解析
2021/06/26 Python
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL