输入密码检测大写是否锁定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 相关文章推荐
jquery 年会抽奖程序
Dec 22 Javascript
jQuery DOM插入节点操作指南
Mar 03 Javascript
jQuery实现平滑滚动到指定锚点的方法
Mar 20 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 Javascript
微信小程序之电影影评小程序制作代码
Aug 03 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
May 02 Javascript
layui实现点击按钮给table添加一行
Aug 10 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
微信小程序实现的图片保存功能示例
Apr 24 Javascript
vue自定义表单生成器form-create使用详解
Jul 19 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
80行代码写一个Webpack插件并发布到npm
May 24 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下正则来匹配dede模板标签的代码
2010/08/21 PHP
PHP内核探索之解释器的执行过程
2015/12/22 PHP
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
php通过PHPExcel导入Excel表格到MySQL数据库的简单实例
2016/10/29 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
浅谈PHP封装CURL
2019/03/06 PHP
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
javascript强大的日期函数代码分享
2013/09/04 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
原生JS实现圣旨卷轴展开效果
2017/03/06 Javascript
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
vue2.0 根据状态值进行样式的改变展示方法
2018/03/13 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
[07:09]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant 选手采访
2021/03/11 DOTA
Python sys.path详细介绍
2013/10/17 Python
python 捕获shell脚本的输出结果实例
2017/01/04 Python
Django model序列化为json的方法示例
2018/10/16 Python
Falsk 与 Django 过滤器的使用与区别详解
2019/06/04 Python
pytorch 求网络模型参数实例
2019/12/30 Python
tensorflow实现打印ckpt模型保存下的变量名称及变量值
2020/01/04 Python
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
英国团购网站:Groupon英国
2017/11/28 全球购物
英国和爱尔兰的自炊式豪华度假小屋:Rural Retreats
2018/06/08 全球购物
Ruby如何实现动态方法调用
2012/11/18 面试题
机电专业求职信
2014/06/14 职场文书
后备干部推荐材料
2014/12/24 职场文书
计算机实训心得体会
2016/01/14 职场文书
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫