输入密码检测大写是否锁定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实现动态表格点击按钮表格增加一行
Aug 24 Javascript
浅谈AngularJS中ng-class的使用方法
Nov 11 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
vue中设置height:100%无效的问题及解决方法
Jul 27 Javascript
Vue-Router基础学习笔记(小结)
Oct 15 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
详解JavaScript作用域和作用域链
Mar 19 Javascript
详谈Object.defineProperty 及实现数据双向绑定
Jul 18 Javascript
Element Card 卡片的具体使用
Jul 26 Javascript
详解vue v-model
Aug 31 Javascript
LayUI+Shiro实现动态菜单并记住菜单收展的示例
May 06 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实现单链表的实例代码
2013/03/22 PHP
php获取操作系统语言代码
2013/11/04 PHP
PHP中的闭包(匿名函数)浅析
2015/02/07 PHP
php格式化电话号码的方法
2015/04/24 PHP
php析构函数的简单使用说明
2015/08/24 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
自制PHP框架之路由与控制器
2017/05/07 PHP
IE php关于强制下载文件的代码
2008/08/23 Javascript
浏览器窗口加载和大小改变事件示例
2014/02/27 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
js控件Kindeditor实现图片自动上传功能
2020/07/20 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
socket.io学习教程之基础介绍(一)
2017/04/29 Javascript
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python使用Flask框架获取用户IP地址的方法
2015/03/21 Python
Python随机生成手机号、数字的方法详解
2017/07/21 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
python实现数据分析与建模
2019/07/11 Python
分享PyCharm的几个使用技巧
2019/11/10 Python
python、Matlab求定积分的实现
2019/11/20 Python
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
校园餐饮创业计划书
2014/01/10 职场文书
房地产财务管理制度
2014/02/02 职场文书
汽车销售经理岗位职责
2014/06/09 职场文书
党员目标管理责任书
2014/07/25 职场文书
市场策划求职信
2014/08/07 职场文书
个人授权委托书范文
2014/09/21 职场文书
拾金不昧表扬信
2015/01/16 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python