分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

js实现密码输入框对开启键盘大写锁定的提示(IE浏览器下有自动识别提示则不执行(用IE自带效果即可))

发布时间:2023-09-06 02:30责任编辑:傅花花关键词:js浏览器

代码如下:

<!DOCTYPE html><html><head> ???<meta charset="utf-8"> ???<title>大写键盘锁定提示</title></head><body>请输入密码:<input class="text" id="loginPasswd" type="password"/><div id="capital" style="display:none;color:#F90;padding:2px 0 2px 95px;position:absolute;">大写锁定已开启</div><script type="text/javascript"> ???var inputPWD = document.getElementById(‘loginPasswd‘); ???inputPWD.onfocus = function () { ???????isCapsLock(); ???} ???/* 检测输入框的大小写是否开启 */ ???function isCapsLock() { ???????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; ???????????var isShift = e.shiftKey || (keyCode == 16 ) || false; ???????????if (((keyCode >= 65 && keyCode <= 90 ) && !isShift) || ((keyCode >= 97 && keyCode <= 122 ) && isShift)) { ???????????????capitalTip.toggle(‘block‘); ???????????????capital = true ???????????} ???????????else { ???????????????capitalTip.toggle(‘none‘); ???????????} ???????} ???????//判断是否是IE浏览器(解决自带的和自写的重复出现问题) ???????function isIE() { ???????????if (!!window.ActiveXObject || "ActiveXObject" in window) { ???????????????return true; ???????????} ???????????else { ???????????????return false; ???????????} ???????} ???????//如果不是IE则进行手动提示 ???????if (!isIE()) { ???????????inputPWD.onkeypress = detectCapsLock; ???????????inputPWD.onkeyup = function (event) { ???????????????var e = event || window.event; ???????????????if (e.keyCode == 20 && capital) { ???????????????????capitalTip.toggle(); ???????????????????return false; ???????????????} ???????????} ???????} ???}</script></body></html>

需要注意:

需要通过获取焦点事件调用判断大写键盘锁定事件,如果直接调用会出现密码框失去焦点后切换大写锁定后再次进入密码框会出现大写锁定提示错误的问题

js实现密码输入框对开启键盘大写锁定的提示(IE浏览器下有自动识别提示则不执行(用IE自带效果即可))

原文地址:https://www.cnblogs.com/zhoushuang0426/p/10283314.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved