输入密码检测大写是否锁定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实现仿银行密码输入框效果的代码
Dec 13 Javascript
讨论html与javascript在浏览器中的加载顺序问题
Nov 27 Javascript
JQuery中$.each 和$(selector).each()的区别详解
Mar 13 Javascript
利用JavaScript实现拖拽改变元素大小
Dec 14 Javascript
微信小程序 页面之间传参实例详解
Jan 13 Javascript
jQuery中layer分页器的使用
Mar 13 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
JS排序算法之希尔排序与快速排序实现方法
Dec 12 Javascript
js操作table中tr的顺序实现上移下移一行的效果
Nov 22 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
Apr 24 Javascript
vue的滚动条插件实现代码
Sep 07 Javascript
微信小程序左滑删除实现代码实例
Sep 16 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基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
php &amp;&amp; 逻辑与运算符使用说明
2010/03/04 PHP
测试PHP连接MYSQL成功与否的代码
2013/08/16 PHP
php while循环得到循环次数
2013/10/26 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
PHP封装的mysqli数据库操作类示例
2019/02/16 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
用jscript实现列出安装的软件列表
2007/06/18 Javascript
深入分析js中的constructor和prototype
2012/04/07 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
2014/04/16 Javascript
利用css+原生js制作简单的钟表
2020/04/07 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
树结构之JavaScript
2017/01/24 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
vue实现动态显示与隐藏底部导航的方法分析
2019/02/11 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
python中的__slots__使用示例
2015/02/26 Python
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
Python实现简单遗传算法(SGA)
2018/01/29 Python
Python日志模块logging基本用法分析
2018/08/23 Python
Python实现iOS自动化打包详解步骤
2018/10/03 Python
Apache部署Django项目图文详解
2019/07/30 Python
Python数组并集交集补集代码实例
2020/02/18 Python
python脚本第一行如何写
2020/08/30 Python
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
莫斯科购买书籍网站:Book24
2020/01/12 全球购物
俄罗斯第一家多品牌在线奢侈品精品店:Aizel.ru
2020/09/06 全球购物
公司应聘求职信
2014/06/21 职场文书
志愿者个人总结
2015/03/03 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
nginx安装以及配置的详细过程记录
2021/09/15 Servers
尝试使用Python爬取城市租房信息
2022/04/12 Python
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL