输入密码检测大写是否锁定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 相关文章推荐
js一组验证函数
Dec 20 Javascript
FF IE兼容性的修改小结
Sep 02 Javascript
javascript之bind使用介绍
Oct 09 Javascript
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
Feb 12 Javascript
jQuery设置与获取HTML,文本和值的简单实例
Feb 26 Javascript
php析构函数的具体用法小结
Mar 11 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 Javascript
JavaScript获取当前网页标题(title)的方法
Apr 03 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
Jun 15 Javascript
layui框架与SSM前后台交互的方法
Sep 12 Javascript
使用flow来规范javascript的变量类型
Sep 12 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/12/20 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
PHP使用DirectoryIterator显示下拉文件列表的方法
2015/03/13 PHP
php 截取中英文混合字符串的方法
2018/05/31 PHP
laravel 修改.htaccess文件 重定向public的解决方法
2019/10/12 PHP
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
javascript自启动函数的问题探讨
2013/10/05 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
2014/06/20 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
2017/11/20 Javascript
Vue 路由 过渡动效 数据获取方法
2018/07/31 Javascript
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
JavaScript模板引擎应用场景及实现原理详解
2018/12/14 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
jQuery位置选择器用法实例分析
2019/06/28 jQuery
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
[02:39]DOTA2英雄基础教程 极限穿梭编织者
2013/12/05 DOTA
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
python保存字符串到文件的方法
2015/07/01 Python
通过实例了解python property属性
2019/11/01 Python
Python实现新型冠状病毒传播模型及预测代码实例
2020/02/05 Python
Python小白不正确的使用类变量实例
2020/05/29 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
美国羊皮公司:Overland
2018/01/15 全球购物
美国受信赖的教育产品供应商:Nest Learning
2018/06/14 全球购物
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
自我鉴定总结
2014/03/24 职场文书
违章停车检讨书
2014/10/21 职场文书
2015年公路养护工作总结
2015/05/13 职场文书
2016年圣诞节寄语(一句话)
2015/12/07 职场文书
转变工作作风心得体会
2016/01/23 职场文书