输入密码检测大写是否锁定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 相关文章推荐
PJBlog插件 防刷新的在线播放器
Oct 25 Javascript
用javascript getComputedStyle获取和设置style的原理
Oct 10 Javascript
JavaScript 判断日期格式是否正确的实现代码
Jul 04 Javascript
js中unicode转码方法详解
Oct 09 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
JavaScript获取当前cpu使用率的方法
Dec 15 Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
移动端(微信等使用vConsole调试console的方法
Mar 05 Javascript
ES6中new Function()语法及应用实例分析
Feb 19 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 jQuery
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
Jan 28 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中在数据库中保存Checkbox数据(1)
2006/10/09 PHP
javascript 跳转代码集合
2009/12/03 Javascript
Span元素的width属性无效果原因及解决方案
2010/01/15 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
jquery中获取id值方法小结
2013/09/22 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
2014/06/20 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
div中文字内容溢出常见的解决方法
2017/03/16 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
2017/09/19 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
iview的table组件自带的过滤器实现
2019/07/12 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
python文件读写并使用mysql批量插入示例分享(python操作mysql)
2014/02/17 Python
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
Python中字典的基础知识归纳小结
2015/08/19 Python
简单讲解Python中的数字类型及基本的数学计算
2016/03/11 Python
Python 异常处理的实例详解
2017/09/11 Python
Python爬虫包BeautifulSoup实例(三)
2018/06/17 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
Python实现简单层次聚类算法以及可视化
2019/03/18 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
Python Des加密解密如何实现软件注册码机器码
2020/01/08 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
pytorch  网络参数 weight bias 初始化详解
2020/06/24 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
资源环境与城市管理专业推荐信
2013/11/30 职场文书
电子商务专员岗位职责
2013/12/11 职场文书
党员弘扬焦裕禄精神思想汇报
2014/09/10 职场文书
党员评议思想汇报
2014/10/08 职场文书
西安兵马俑导游词
2015/02/02 职场文书
作弊检讨书范文
2015/05/06 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
Python 如何实现文件自动去重
2021/06/02 Python