输入密码检测大写是否锁定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 相关文章推荐
div移动 输入框不能输入的问题
Nov 19 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
Nov 30 Javascript
firefox浏览器不支持innerText的解决方法
Aug 07 Javascript
jQuery模拟点击A标记示例参考
Apr 17 Javascript
node.js中的fs.renameSync方法使用说明
Dec 16 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
Jun 12 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 Javascript
jquery attr()设置和获取属性值实例教程
Sep 25 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
Jul 24 Javascript
javascript trie前缀树的示例
Jan 29 Javascript
electron+vue实现div contenteditable截图功能
Jan 07 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中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
php cURL和Rolling cURL并发方式比较
2013/10/30 PHP
PHP+javascript制作带提示的验证码源码分享
2014/05/28 PHP
php实现插入排序
2015/03/29 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
编写可维护面向对象的JavaScript代码[翻译]
2011/02/12 Javascript
ExtJS自定义主题(theme)样式详解
2013/11/18 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
2014/06/03 Javascript
javascript中eval函数用法分析
2015/04/25 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
js中toString()和String()区别详解
2017/03/23 Javascript
layer弹窗插件操作方法详解
2017/05/19 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
2018/01/31 Javascript
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
Vue之Vue.set动态新增对象属性方法
2018/02/23 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
vue自定义组件实现双向绑定
2021/01/13 Vue.js
python使用多线程不断刷新网页的方法
2015/03/31 Python
Python基础教程之浅拷贝和深拷贝实例详解
2017/07/15 Python
详解Python字典小结
2018/10/20 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
自定义实现 PyQt5 下拉复选框 ComboCheckBox的完整代码
2020/03/30 Python
希尔顿酒店官方网站:Hilton Hotels
2017/06/01 全球购物
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
介绍一下Java的事务处理
2012/12/07 面试题
人民调解员先进事迹材料
2014/05/08 职场文书
党支部组织生活会整改方案
2014/09/30 职场文书