输入密码检测大写是否锁定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 相关文章推荐
28个常用JavaScript方法集锦
Jan 14 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
Jun 01 Javascript
js实现将json数组显示前台table中
Jan 10 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
Jan 22 Javascript
激动人心的 Angular HttpClient的源码解析
Jul 10 Javascript
angular中实现li或者某个元素点击变色的两种方法
Jul 27 Javascript
微信小程序如何获取用户手机号
Jan 26 Javascript
JQuery扩展对象方法操作示例
Aug 21 jQuery
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
Nov 04 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
May 09 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 Javascript
你不知道的SpringBoot与Vue部署解决方案
Nov 09 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
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
PHP合并两个数组的两种方式的异同
2012/09/14 PHP
PHP查找与搜索数组元素方法总结
2015/06/12 PHP
php设置页面超时时间解决方法
2015/09/22 PHP
Yii+MYSQL锁表防止并发情况下重复数据的方法
2016/07/14 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
javascript+xml技术实现分页浏览
2008/07/27 Javascript
JavaScript XML操作 封装类
2009/07/01 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
javascript实现textarea中tab键的缩排处理方法
2015/06/26 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
jQuery+Ajax实现限制查询间隔的方法
2016/06/07 Javascript
EasyUI Pagination 分页的两种做法小结
2016/07/09 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
2018/02/07 Javascript
webpack4 CSS Tree Shaking的使用
2018/09/03 Javascript
nodejs中函数的调用实例详解
2018/10/31 NodeJs
JS实现电话号码的字母组合算法示例
2019/02/26 Javascript
详解vuex的简单todolist例子
2019/07/14 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
跟老齐学Python之复习if语句
2014/10/02 Python
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
python去除空格和换行符的实现方法(推荐)
2017/01/04 Python
Python使用random.shuffle()打乱列表顺序的方法
2018/11/08 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
css3中背景尺寸background-size详解
2014/09/02 HTML / CSS
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
香港家用健身器材、运动器材及健康美容仪器专门店:FitBoxx
2019/12/05 全球购物
创先争优制度
2014/01/21 职场文书
电力培训心得体会
2014/09/02 职场文书
弄虚作假心得体会
2014/09/10 职场文书