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

这个月都还没。必须要凑数。
网站登录为了更好的用户体验都会在输入密码的时候检测是否开启大写。提醒用户。
在下面的 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>

赞 (0)

相关推荐

  • js实现开启密码大写提示

    js实现开启密码大写提示

    话不多说,请看实例: 1.引入大写提示的js文件 <script type="text/javascript" src="js/Capital_tip.js"></script> 2.页面中调用js window.onload = function() { checkUpCase('pwd', 'capital01');//pwd是密码框的id capital01这是大写提示的提示信息的id } 3.图片中有案例 以上就是本文的全部内容,希望

  • 输入密码时检测大写是否锁定的js代码

    主要对 已经激活input框的 大写锁定进行实时检测. 大写锁定已开启 = 65 && keyCode = 97 && keyCode [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

    这个月都还没.必须要凑数. 网站登录为了更好的用户体验都会在输入密码的时候检测是否开启大写.提醒用户. 在下面的 input框里测试下吧!这段代码来之 <点我>. 不过我做了一点小改进. 主要对 已经激活input框的 大写锁定进行实时检测. 复制代码 代码如下: <div> <input class="text" name="passwd" id="loginPasswd" type="password&

  • JS异步代码单元测试之神奇的Promise

    前言 写这篇文章的起因是在写单元测试时,做形如下测试时 new Promise((resolve, reject) => reject(1)).then().catch(err => { console.log(err) }) async function jestTest () { await Promise.resolve().then() console.log('这个时候catch预期已经被调用,且输出日志') } jestTest() 无法使用await将测试代码恰好阻塞到catch

  • angular.js分页代码的实例

    angular.js分页代码的实例

    对于大多数web应用来说显示项目列表是一种很常见的任务.通常情况下,我们的数据会比较多,无法很好地显示在单个页面中.在这种情况下,我们需要把数据以页的方式来展示,同时带有转到上一页和下一页的功能.现在在学习angular,使用angularjs 分页,基于 directive 实现,样式使用的 bootstrap,直接在 html代码中加入 标签即可调用. 先来看下效果图 实例代码 app.directive('pagePagination', function(){ return { rest

  • 为输入框加入数字js校验代码分享

    js限制只能数字输入,并且在把输入的"非法字符"清除掉之后将焦点停留在输入非法字符的位置,参考如下: html部分: <input value="" type="text" onkeyup="javascript:RepNumber(this)"> JavaScript部分: function RepNumber(obj) { var reg = /^[\d]+$/g; if (!reg.test(obj.valu

  • Node.js实用代码段之获取Buffer对象字节长度

    Node.js实用代码段之获取Buffer对象字节长度

    我们知道Node.js框架下的Buffer对象能够对二进制数据提供很好的支持,那么获取一个Buffer对象真实的字节长度则是必须要用到的功能了.Node.js框架为开发人员提供了一个Buffer.byteLength()方法,下面我们借助一个官方文档提供的例程向读者演示一下该方法的使用过程. 本例ch04.buffer-byteLength.js主要代码如下: /** * ch04.buffer-byteLength.js */ console.info("------Buffer.byteLe

  • JS SetInterval 代码实现页面轮询

    JS SetInterval 代码实现页面轮询

    概念介绍 setInterval 是一个实现定时调用的函数,可按照指定的周期(以毫秒计)来调用函数或计算表达式.setInterval方法会不停地调用函数,直到 clearInterval 被调用或窗口被关闭. 由 setInterval 返回的ID值可用作 clearInterval 方法的参数. 提示: 1000 毫秒= 1 秒. flash用法(来自百度百科) setInterval 动作的作用是在播放动画的时,每隔一定时间就调用函数,方法或对象.可以使用本动作更新来自数据库的变量或更新时

  • Yii安装EClientScript插件扩展实现css,js文件代码压缩合并加载功能

    本文实例讲述了Yii安装EClientScript插件扩展实现css,js文件代码压缩合并加载功能.分享给大家供大家参考,具体如下: 扩展插件下载地址,解压后复制到/protected/vendor/ https://github.com/muayyad-alsadi/yii-EClientScript main配置文件配置插件,components里面增加 //js,css代码压缩,合并 'clientScript' => array( 'class' => 'application.ven

  • JS倒计时代码汇总

    本文实例总结了常见的JS倒计时代码.分享给大家供大家参考.具体汇总如下: 第一种:精确到秒的javascript倒计时代码  HTML代码: 复制代码 代码如下: <form name="form1">  <div align="center" align="center">  <center>离2010年还有:<br>  <input type="textarea" na

  • JS功能代码集锦

    1.模仿fade in(),fade out(). 原理:setInterval ( "opacity++透明度"函数,时间间隔) var alpha = 0; function play(){ timer = setInterval(function(){ alpha += 2; alpha > 100 && (alpha = 100); aImg[index].style.opacity = alpha / 100; aImg[index].style.fil

随机推荐