输入密码检测大写是否锁定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实现兼容IE7的类库 IE7_0_9.zip提供下载
Aug 08 Javascript
jquery 查找select ,并触发事件的实现代码
Mar 30 Javascript
jquery复选框全选/取消示例
Dec 30 Javascript
javascript不同类型数据之间的运算的转换方法
Feb 13 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
Dec 19 Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 Javascript
快速解决js中window.location.href不工作的问题
Nov 02 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
Jul 24 Javascript
原生js封装的ajax方法示例
Aug 02 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 Javascript
js实现踩五彩块游戏
Feb 08 Javascript
Vue路由的模块自动化与统一加载实现
Jun 05 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下判断网址是否有效的代码
2011/10/08 PHP
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
php setcookie(name, value, expires, path, domain, secure) 参数详解
2013/06/28 PHP
PHP单文件上传原理及上传函数的封装操作示例
2019/09/02 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
jscript之List Excel Color Values
2007/06/13 Javascript
javascript prototype原型操作笔记
2009/12/07 Javascript
JavaScript动态调整TextArea高度的代码
2010/12/28 Javascript
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
JS+CSS简单树形菜单实现方法
2015/09/12 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
layui框架中layer父子页面交互的方法分析
2017/11/15 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
JS代码检查工具ESLint介绍与使用方法
2020/02/04 Javascript
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
python删除列表中重复记录的方法
2015/04/28 Python
python图像处理之反色实现方法
2015/05/30 Python
详解Python的Django框架中的中间件
2015/07/24 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
python如何将图片转换素描画
2020/09/08 Python
欧洲有机婴儿食品最大的市场:Organic Baby Food(供美国和加拿大)
2018/03/28 全球购物
Java方面的关于数组和继承的笔面试题
2015/09/18 面试题
办公室文员自荐书
2014/02/03 职场文书
2014最新党员批评与自我批评材料
2014/09/24 职场文书
农村党支部承诺书
2015/04/30 职场文书
驾驶员管理制度范本
2015/08/06 职场文书
详解Vue的options
2021/05/15 Vue.js
Python道路车道线检测的实现
2021/06/27 Python
CSS 实现磨砂玻璃(毛玻璃)效果样式
2023/05/21 HTML / CSS