输入密码时提示大写锁定已打开

最新推荐文章于 2022-02-21 11:20:02 发布

weixin_33713350

最新推荐文章于 2022-02-21 11:20:02 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lujiulong/p/6513239.html

本文介绍了一个基于jQuery的自定义插件，用于在用户输入密码时检测并提示是否开启了大写锁定功能。该插件通过监听键盘事件判断状态，并在需要时显示提示信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、扩展jQuery方法，在引入的jQuery的js中添加如下代码

(function($){$.fn.extend({capsLockTip:function(){return this.each(function(){var ins=new $.CapsLockTip($(this));$(this).data(this.id,ins)})}});$.CapsLockTip=function(___target){this.target=___target;var _this=this;$(document).ready(function(){_this.target.bind("keypress",function(_event){var e=_event||window.event;var kc=e.keyCode||e.which;var isShift=e.shiftKey||(kc==16)||false;$.fn.capsLockTip.capsLockActived=false;if((kc>=65&&kc<=90&&!isShift)||(kc>=97&&kc<=122&&isShift))$.fn.capsLockTip.capsLockActived=true;_this.showTips($.fn.capsLockTip.capsLockActived)});_this.target.bind("keydown",function(_event){var e=_event||window.event;var kc=e.keyCode||e.which;if(kc==20&&null!=$.fn.capsLockTip.capsLockActived){$.fn.capsLockTip.capsLockActived=!$.fn.capsLockTip.capsLockActived;_this.showTips($.fn.capsLockTip.capsLockActived)}});_this.target.bind("focus",function(_event){if(null!=$.fn.capsLockTip.capsLockActived)_this.showTips($.fn.capsLockTip.capsLockActived)});_this.target.bind("blur",function(_event){_this.showTips(false)})});this.createTooltip=function(){if(null!=$.fn.capsLockTip.divTip)return $.fn.capsLockTip.divTip;$("body").append("<div id='divTip__985124855558842555' style='width:100px; height:15px; padding-top:3px; display:none; position:absolute; z-index:9999999999999; text-align:center; background-color:#FDF6AA; color:Red; font-size:12px; border:solid 1px #DBC492; border-bottom-color:#B49366; border-right-color:#B49366;'>大写锁定已打开</div>");$.fn.capsLockTip.divTip=$("#divTip__985124855558842555");return $.fn.capsLockTip.divTip};this.showTips=function(display){var divTip=_this.createTooltip();if(display){var offset=_this.target.offset();divTip.css("left",offset.left+"px");divTip.css("top",offset.top+_this.target[0].offsetHeight+3+"px");divTip.show()}else{divTip.hide()}};$.fn.capsLockTip.divTip=null;$.fn.capsLockTip.capsLockActived=null}})(jQuery);

2、在输入密码的页面添加如下js

//大写锁定提示
$("#password").capsLockTip();

3、效果

转载于:https://www.cnblogs.com/lujiulong/p/6513239.html