专栏首页积累沉淀js监控输入密码检测大写键盘是否锁定

js监控输入密码检测大写键盘是否锁定

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>智能营销平台</title>
	
	</head>

	<body>
			<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>

	</body>

</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 分享几种JS烟花

    今天看到蓝色理想有几个哥们都发了自己写的烟花效果,弄的心里痒痒,自己也想写一个出来玩,结果把IE写死好几次,还是放弃了,这里转几个别人写的效果上来分享 <!DO...

    练小习
  • Aptana:JavaScript开发利器

    简介        Aptana是一个非常强大、开源的专注于Ajax开发的开发工具,看下开源中国社区中对它的功能描述: JavaScript,JavaScri...

    高爽
  • 19+ JavaScript 常用的简写技巧

    博主说:对于任何基于 JavaScript 的开发人员来说,这绝对是一篇必读的文章,乃提升开发效率之神器也。 正文 ? 1. 三元运算符 当你想用一行代码...

    CG国斌
  • 解析javascript关键字this

    this是javascript语言的一个关键字。它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。下面我们将按照调用方式的不同,分别讨论 th...

    IMWeb前端团队
  • 一个名字引发的血案: left-pad 和 npm 的那些事

    近日,一个只有 11 代码的 left-pad 被作者 unpublished。 npm 圈子因此闹得鸡犬不宁。究竟发生了什么呢? [图片] 发生...

    AlgorithmDog
  • JS判断滚动条是否停止滚动

           背景:昨天一个同事有种需求,有一个展示数据区域的div,带滚动条,当滚动条滚动时,需要向后台发请求,计算数据,再拿到前台展示。        分析...

    高爽
  • 还在纠结用不用ES6,不如来试试TypeScript

    The only limits in our life are those we impose on ourselves. 弱爆的 ES6 in bro...

    IMWeb前端团队
  • oncopy和onpaste

           在Javascript中,有相应的事件可以监听复制和粘贴,那就是oncopy和onpaste。        oncopy: demo: <bo...

    高爽
  • js检测图形碰撞笔记

    图形平面碰撞的检测方式就是判断点是否同时在两个对象中。比如这个笔记中的例子 <!DOCTYPE html> <html> <head> <title>i...

    练小习
  • 当JavaScript遇上UINT64

    导语:写下这篇文章的缘由是因为在项目过程中,碰到了一个使用JavaScript处理 UINT64 类型数字的坑。 与大部分现代编程语言(包括几乎所有的脚本语言...

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券