zoukankan      html  css  js  c++  java
  • 输入密码时提示大写锁定已打开

    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='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、效果

  • 相关阅读:
    Photon3Unity3D.dll 解析三——OperationRequest、OperationResponse
    关于VS2010的一些操作
    Photon3Unity3D.dll 解析二——EventData
    Photon3Unity3D.dll 解析一
    关于U3D中的移动和旋转
    U3D的一些常用基础脚本
    U3D模拟仿真实现
    构建基于TCP的应用层通信模型
    TCP协议的三次握手
    Python生成随机字符串
  • 原文地址:https://www.cnblogs.com/lujiulong/p/6513239.html
Copyright © 2011-2022 走看看