输入密码检测大写是否锁定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对文字按照拼音排序实现代码
Dec 27 Javascript
jquery中 $.expr使用实例介绍
Jun 09 Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 Javascript
深入理解js数组的sort排序
May 28 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 Javascript
react路由配置方式详解
Aug 07 Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
Jun 21 Javascript
Vue仿微信app页面跳转动画效果
Aug 21 Javascript
微信小程序中为什么使用var that=this
Aug 27 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的类 功能齐全的发送邮件类
2006/10/09 PHP
php操作XML、读取数据和写入数据的实现代码
2014/08/15 PHP
Yii框架弹出框功能示例
2017/01/07 PHP
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
JS对象转换为Jquery对象实现代码
2013/12/29 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
在JavaScript中处理数组之reverse()方法的使用
2015/06/09 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
微信小程序 跳转方式总结
2017/04/20 Javascript
JavaScript表单验证实现代码
2017/05/22 Javascript
jQuery复合事件用法示例
2017/06/10 jQuery
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
element-ui使用导航栏跳转路由的用法详解
2018/08/22 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
详解ES6中的Map与Set集合
2019/03/22 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
2021/02/08 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
2021/02/11 Vue.js
[00:32]2018DOTA2亚洲邀请赛VGJ.T出场
2018/04/03 DOTA
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
Python正则表达式分组概念与用法详解
2017/06/24 Python
OpenCV2.3.1+Python2.7.3+Numpy等的配置解析
2018/01/05 Python
更新pip3与pyttsx3文字语音转换的实现方法
2019/08/08 Python
python学生管理系统的实现
2020/04/05 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
pandas DataFrame 数据选取,修改,切片的实现
2020/04/24 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
Anaconda+spyder+pycharm的pytorch配置详解(GPU)
2020/10/18 Python
元旦联欢会感言
2014/03/04 职场文书
意向书范文
2014/03/31 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
查摆问题自查报告范文
2014/10/13 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书
安全生产学习心得体会
2016/01/18 职场文书