输入密码检测大写是否锁定js实现代码

 更新时间:2012年12月03日 15:57:49   作者:  
网站登录为了更好的用户体验都会在输入密码的时候检测是否开启大写,这样有助于提醒用户,需要学习的朋友可以参考下
这个月都还没。必须要凑数。
网站登录为了更好的用户体验都会在输入密码的时候检测是否开启大写。提醒用户。
在下面的 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>

相关文章

  • JS如何根据条件取出数组中对应项

    JS如何根据条件取出数组中对应项

    这篇文章主要介绍了JS根据条件取出数组中对应项,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-03-03
  • JS实现密码框的显示密码和隐藏密码功能示例

    JS实现密码框的显示密码和隐藏密码功能示例

    这篇文章主要介绍了JS实现密码框的显示密码和隐藏密码功能,涉及javascript针对页面form表单元素动态操作的相关技巧,需要的朋友可以参考下
    2016-12-12
  • 原生js实现二级联动菜单

    原生js实现二级联动菜单

    这篇文章主要为大家详细介绍了原生js实现二级联动菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • 微信小程序开发实战教程之手势解锁

    微信小程序开发实战教程之手势解锁

    这篇文章主要介绍了微信小程序开发实战教程之手势解锁的相关资料,本文分步骤给大家介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下
    2016-11-11
  • js实现屏蔽默认快捷键调用自定义事件示例

    js实现屏蔽默认快捷键调用自定义事件示例

    本文要说的是如何屏蔽默认的快捷键后去执行自定义的事件,下面以一个textarea中enter进行保存的例子为大家详细介绍下,感兴趣的朋友可以参考下哈
    2013-06-06
  • JavaScript实现动态生成表格案例详解

    JavaScript实现动态生成表格案例详解

    本文主要介绍了通过JavaScript实现一个动态添加表格的案例,当点击添加按钮时,可以弹出一个表单,然后将输入的内容添加到表格中,也可以将表格中的整行内容清除。感兴趣的可以学习一下
    2021-12-12
  • JavaScript之BOM构成和常用事件详解

    JavaScript之BOM构成和常用事件详解

    这篇文章主要为大家介绍了JavaScript BOM构成和常用事件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • View.post() 不靠谱的地方你知道多少

    View.post() 不靠谱的地方你知道多少

    本文给大家分享了view.post()方法不靠谱的地方,以及post在7.0中的差异,需要的的朋友参考下本文吧
    2017-08-08
  • js中的this作用域全解析

    js中的this作用域全解析

    这篇文章主要介绍了js中的this作用域全解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • JavaScript跨平台的开源框架NativeScript

    JavaScript跨平台的开源框架NativeScript

    本文给大家分享的是一款使用javascript来构建跨平台原生移动应用的开源框架--NativeScript,可以使用JavaScript开发跨平台、真正原生的iOS, Android 和 Windows 移动App。开发人员使用NativeScript提供的库来构建应用UI,其抽象了各种原生平台之间的不同。
    2015-03-03

最新评论