功能介绍:
在Web下输入密码时提示大写锁定键,封装成jq插件方便有需要的同学!

使用:
$("#txtPWD").capsLockTip();

截图预览:

代码(2012-05-03 10:20最后修改):

1. 使用公用静态对象,使多个密码框共享状态。
2. 增加focus 和 blur事件,提示更方便及时。
3. 优化代码。
4. 使用:$("#txtPWD").capsLockTip(); //注意不要将些代码加在$(document).ready()里面。
5. 修正页面在Post后插件失效。

//=============== 大写锁定键打开提示 ============================================//
/*
使用:$("#txtPWD").capsLockTip(); //注意不要将些代码加在$(document).ready()里面。
*/
(function ($) {$.fn.extend({capsLockTip: function () {return this.each(function () {//创建对象实例并保存。//获取实例对象:var api = $("#txtPWD").data("txtPWD");var ins = new $.CapsLockTip($(this));$(this).data(this.id, ins);});}});//创建一个实例。//___target jq目标对象。//___divTipID   显示提示文本的div。$.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);});});//创建显示大写锁定的div。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();}};//jq控件公用静态对象。//提示框。$.fn.capsLockTip.divTip = null;//大写锁定键状态$.fn.capsLockTip.capsLockActived = null;};
})(jQuery);

转载于:https://www.cnblogs.com/mrhgw/archive/2012/04/21/2461566.html

发布一个jquery插件--在Web下输入密码时提示大写锁定键(2012-05-03 10:20最后修改)...相关推荐

  1. 发布一个jQuery插件:formStorage

    中午休息时,没有睡意,没事写了个jquery插件:formStorage. 原理很简单,通过本地存储机制(userData或者localStorage),存储表单中元素的状态到本地. 需要时可以把所存 ...

  2. 分享10个2012年最新发布的jQuery插件

    为什么80%的码农都做不了架构师?>>>    日期:2012-5-9  来源:GBin1.com 本文收集了最新的jQuery社区发布的jQuery插件,绝对是你没有见过的,希望大 ...

  3. 实现你人生中的第一个jQuery插件

    前言 本想把本篇取名:从0开始写前端UI框架:实现你人生中的第一个jQuery插件 ,但感觉标题太长,所以简单明了直接取后面主题为题目吧. 前一篇文章 已经对my-ui框架做了简单的介绍.谈到了我是如 ...

  4. 惠普笔记本按开机键后电源灯亮的,但是屏幕一直是黑的,只有大写锁定键闪烁,闪3次一个循环,听得到风扇...

    现象: 惠普笔记本按开机键后电源灯亮的,但是屏幕一直是黑的,只有大写锁定键闪烁,闪3次一个循环,听得到风扇转动的声音,热风,cpu应该也在工作,请问是什么问题. 解决(我按照红色的作了,就可以了,真是 ...

  5. 设计师和开发人员更快完成工作需求的35个惊人的jquery插件教程(下)

    jQuery是一个快速,简洁的工具,它可以遍历HTML文档,处理事件,执行动画,并添加AJAX.jQuery赋予web开发更多的选择机会,使网站产生令人难以置信的元素效果不像之前需要写下几十行代码实现 ...

  6. 所谓 jQuery 插件,怎样开发一个 jQuery 插件

    简单来说,所谓 jQuery 插件就是扩展在 jQuery 原型对象上的一个方法.通过扩展 jQuery 对象,每次调用 jQuery 对象的时候,对象里面都包含了我们自己所添加的那个方法. 一般插件 ...

  7. 收藏10个2012年最新发布的jQuery插件

    1. SearchMeme 一个即时搜索的jQuery插件 2. Wookmark 一个用来创建动态,多列布局的jQuery插件.帮助你在动态列中布局一系列的元素. 3. Intelligist 使用 ...

  8. 我写的第一个jquery插件:jquery.photoFrame(version 0.2)

    先看效果 introduce     jQuery photoframe plugin     A useful plugin to beautify image or text by wrappin ...

  9. 使用 Go 从零开发并发布一个 Kubectl 插件

    作者:KaliArch(薛磊),某 Cloud MSP 服务商产品负责人,熟悉企业级高可用/高并发架构,包括混合云架构.异地灾,熟练企业 DevOPS 改造优化,熟悉 Shell/Python/Go ...

最新文章

  1. Virtual PC 2007下虚拟机与本机双XP系统实现互联与上网详解
  2. RPA有哪些优点和缺点?
  3. “AV终结者/8749”病毒清理办法
  4. 微信朋友圈技术之道:三个人的后台团队与每日十亿的发布量
  5. Java dispose()函数窗口无法关闭
  6. Django之url和视图函数
  7. python学习笔记(四):函数
  8. c语言会员卡管理系统,路西牌会员管理系统。
  9. 八边形点坐标数的lisp_图形学入门第五课:齐次坐标
  10. Qt文档阅读笔记-QGraphicsBlurEffect官方解析与实例
  11. [深度学习]-基于tensorflow的CNN和RNN-LSTM文本情感分析对比
  12. 计算机硬件的五大单元
  13. 【codevs1001】舒适的路线,心累的冰茶几
  14. 微博正式登陆港交所挂牌上市:开盘破发 较发行价跌6.1%
  15. 拳王虚拟项目公社:怎么找低价电影票,低价电影票怎样赚钱,低价电影票实操赚钱方法?
  16. 苹果市值突破2万亿美元;华为推出PC版HMS“擎云生态”;Android11将强制应用使用内置相机| 极客头条...
  17. 深度解析vue.js响应式原理解析与实现
  18. HTTP请求tomcat版本升级无法识别问题
  19. excel报表汇总工具
  20. 解决 Maven ‘parent.relativePath‘ of POM

热门文章

  1. Jquery Ajax方法传值到action
  2. 手机/邮箱等帐号判断
  3. android开发——手机通话功能实现
  4. 三步搞定android应用底部导航栏
  5. python函数-返回菲波那切数列for,range,append
  6. java中引用数据类型和基本数据类型的一些区别(貌似不完整,但会有些启示)
  7. 元旦和春节将至,抢票神器助君早日回家
  8. NFT去中心化自治组织YGG完成130万美元融资,Delphi Digital领投
  9. 去中心化数据库Bluzelle公布2021年路线图,将于2月3日上线主网
  10. 赛锐信息:FlexBroswer,一劳永逸解决业务系统Flash问题