提示键盘锁定大写jQuery代码
2017-04-14 16:17
225 查看
1、建个js文件如upper_tip.js,存放以下代码
(function ($) {
$.fn.extend({
capsLockTip: function (divTipID) {
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 () {
//创建显示大写锁定的div。
if(null == $.fn.capsLockTip.divTip){
$("body").append("<div id='divTip__985124855558842555' style='width:100px; height:18px; line-height:18px;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");
}
_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.showTips = function (display) {
if (display) {
var offset = _this.target.offset();
$.fn.capsLockTip.divTip.css("left", offset.left + "px");
$.fn.capsLockTip.divTip.css("top", offset.top + _this.target[0].offsetHeight + 3 + "px");
$.fn
4000
.capsLockTip.divTip.show();
}
else {
$.fn.capsLockTip.divTip.hide();
}
};
//jq控件公用静态对象。
//提示框。
$.fn.capsLockTip.divTip = null;
//大写锁定键状态
$.fn.capsLockTip.capsLockActived = null;
};
})(jQuery);
2、在要提示锁定大写的页面引入上面的js文件upper_tip.js
3、在要提示锁定大写的页面的js中添加如下一行代码
$("#password").capsLockTip();
(function ($) {
$.fn.extend({
capsLockTip: function (divTipID) {
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 () {
//创建显示大写锁定的div。
if(null == $.fn.capsLockTip.divTip){
$("body").append("<div id='divTip__985124855558842555' style='width:100px; height:18px; line-height:18px;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");
}
_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.showTips = function (display) {
if (display) {
var offset = _this.target.offset();
$.fn.capsLockTip.divTip.css("left", offset.left + "px");
$.fn.capsLockTip.divTip.css("top", offset.top + _this.target[0].offsetHeight + 3 + "px");
$.fn
4000
.capsLockTip.divTip.show();
}
else {
$.fn.capsLockTip.divTip.hide();
}
};
//jq控件公用静态对象。
//提示框。
$.fn.capsLockTip.divTip = null;
//大写锁定键状态
$.fn.capsLockTip.capsLockActived = null;
};
})(jQuery);
2、在要提示锁定大写的页面引入上面的js文件upper_tip.js
3、在要提示锁定大写的页面的js中添加如下一行代码
$("#password").capsLockTip();
相关文章推荐
- 发布一个在Web下输入密码时提示大写锁定键的Jquery插件
- jquery插件--在input下输入密码时提示大写锁定键
- 发布一个jquery插件--在Web下输入密码时提示大写锁定键(2012-05-03 10:20最后修改)
- js实现的键盘开启大写锁定提示和密码显示与隐藏的效果
- 基于jQuery实现的当离开页面时出现提示的实现代码
- 基于JQuery 的消息提示框效果代码
- 在delphi中实现密码框“大写锁定打开”的提示
- JQuery浮动DIV提示信息并自动隐藏的代码
- jquery 锁定弹出层实现代码
- 基于jQuery实现的当离开页面时出现提示的实现代码
- VS 2010 项目里面的独立 JS 中启用 jquery 代码提示。
- Dreamweaver 8 jquery 代码提示
- Notepad++ 配置 支持jquery、html、css、javascript、php代码提示
- jquery利用event.which方法获取键盘输入值的代码
- jquery利用event.which方法获取键盘输入值的代码
- 基于jquery的loading 加载提示效果实现代码
- VS2008 jQuery和Ext代码提示
- 不打开文件操作db时,如果遇到和窗体交互,不会提示文档未锁,但同样需要锁定当前文档,代码如下
- 使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
- jquery依然简短几句代码实现给元素动态添加及获取提示信息