Jquery 判断是否锁定大小写键插件
/**
* Caps Lock
* @since for example:$("#test").capsLockTip({width:"200px",text:"error"});
*/
(function($) {
var curID = 0;//
$.fn.extend({
capsLockTip : function(options) {
options = $.extend({}, $.CapsLockTip.defaults, options);
return this.each(function() {
new $.CapsLockTip($(this),options);
});
}
});
$.CapsLockTip = function(input,options) {
// 设置当前实例的配置参数。
var _this = this;
var width=options.width;// 设置自动完成框的宽度
width = width < $(input).width()?$(input).width():width;
var $input = $(input).attr("curCapsLockId", curID++);
var $div = $("#autocapsLock" + $input.attr("curCapsLockId")).length != 0 ? $("#autocapsLock"
+ $input.attr("curCapsLockId"))
: $("<div/>").attr("id",
"autocapsLock" + $input.attr("curCapsLockId")).css({
"padding-top" : "3px",
position : "absolute",
"z-index" : "99999"
}).css("width",width)
.css("left", $input.offset().left + "px")
.css("top", $input.offset().top + $input.offsetHeight + 3 + "px")
.appendTo("body").text(options.text).hide();
if(!$div.attr("class")&&options.styleClass){
$div.addClass(options.styleClass);
}else{
$div.css({color : "red",
"font-size" : "12px",
border : "solid 1px #DBC492",
"border-bottom-color" : "#B49366",
"border-right-color" : "#B49366"});
}
$input.bind("keypress", function(_event) {
var e = _event || window.event;
var kc = e.keyCode || e.which;// 按键的keyCode
var isShift = e.shiftKey || (kc == 16) || false;// shift键是否按住
$.fn.capsLockTip.capsLockActived = false;
if ((kc >= 65 && kc <= 90 && !isShift)
|| (kc >= 97 && kc <= 122 && isShift))
$.fn.capsLockTip.capsLockActived = true;
_this.showTips($.fn.capsLockTip.capsLockActived);
});
$input.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);
}
});
$input.bind("focus", function(_event) {
if (null != $.fn.capsLockTip.capsLockActived)
_this.showTips($.fn.capsLockTip.capsLockActived);
});
$input.bind("blur", function(_event) {
_this.showTips(false);
});
//Show or hide the Caps Lock prompt.
this.showTips = function(display) {
if (display) {
$div.show();
} else {
$div.hide();
}
};
// Caps Lock key state
$.fn.capsLockTip.capsLockActived = null;
};
$.CapsLockTip.defaults = {
styleClass:"",//提示框样式class名称
width:0,//提示框宽度
text:"大写键已被锁定"//错误提示信息
};
})(jQuery);
分享到:
相关推荐
此外,还可以利用插件提供的配置选项来控制键盘的行为,比如是否显示小键盘、设置默认输入类型等。 总的来说,jQuery键盘插件是一个实用的工具,能够增强网页应用的交互性,特别是在需要用户频繁输入数据的场景下。...
jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....
4. **兼容性**:由于是基于jQuery开发,所以该插件应具有良好的浏览器兼容性,能够在大部分现代浏览器上正常工作,包括桌面和移动端。 5. **易于集成**:作为一款jQuery插件,它应该提供简单的API接口和配置选项,...
jquery插件库大全(200个): jqueryQQ表情插件 jquery下拉菜单导航 jquery下拉菜单栏 jquery仿Windows系统选中图标效果 jquery仿京东商品详情页图片放大效果 jquery仿百度新闻焦点轮播 jquery分离布局模版 jquery...
组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件...
jQuery模拟键盘打字插件typetype是一款jQuery插件,模拟人的打字动画效果。
jQuery俩张图片局部放大预览插件.rar jQuery俩张图片局部放大预览插件.rar jQuery俩张图片局部放大预览插件.rar jQuery俩张图片局部放大预览插件.rar jQuery俩张图片局部放大预览插件.rar jQuery俩张图片局部放大...
在本案例中,jQuery被用来增强验证码输入框的功能,提供区分大小写的验证规则,这意味着用户必须按照指定的大小写顺序输入验证码,从而增加了破解的难度。 这款插件的工作原理可能包括以下几点: 1. **生成验证码*...
总结来说,"jquery锁定行锁定列"是一种提高用户体验的网页开发技术,通过使用jQuery和特定的插件(如frozenTable),可以在各种主流浏览器上实现表格的冻结和锁定功能,使得用户在查看大量数据时能够更方便地浏览和...
jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件
1. **图片预加载**:在用户需要查看大图之前,插件会先加载图片的较小版本,然后在用户交互时快速加载大图,以减少页面加载时间。 2. **放大镜效果**:当鼠标悬停在图片上时,显示一个透明的放大镜区域,展示图片的...
《jQuery抽奖插件详解及其在网页设计中的应用》 jQuery,作为一款强大的JavaScript库,极大地简化了DOM操作、事件处理、动画设计等任务,深受Web开发者喜爱。在网页设计领域,jQuery抽奖插件是实现互动体验、提升...
**jQuery表格插件详解** jQuery表格插件是前端开发中常用的一种工具,它极大地提升了HTML表格的功能性和用户体验。本文将深入探讨这些插件的特点、优势以及如何利用它们创建功能丰富的数据展示界面。 ### 1. ...
"jQuery写的js调试插件"就是这样一个工具,它借鉴了Java中的日志框架log4j的概念,旨在提供更直观、灵活的JS调试体验。 **主要特点:** 1. **依赖jQuery**:这个插件基于jQuery构建,这意味着你需要在项目中引入...
**jQuery1.3 DW插件** 是一个专为Dreamweaver(DW)用户设计的扩展,主要用于提升在DW环境中编写jQuery代码的效率。这个插件是针对DW CS3版本优化的,它集成了jQuery 1.3版本的功能,提供了一个方便的自动提示工具,...
这个点击图片放大插件就是典型的jQuery插件,它利用jQuery提供的API和事件处理机制,实现了图片的动态放大与缩小效果。 三、插件实现原理 1. 图片绑定事件:首先,插件会为页面中的所有图片元素绑定点击事件。当...
`jquery.hotkeys`插件的核心在于它可以监听到键盘上按下和释放的单个键,以及复杂的组合键,如Ctrl + S、Alt + F4等。这些组合键可以被映射到特定的函数或行为,提升用户体验,让用户可以通过键盘快速执行命令,而...
**jQuery IP地址输入框插件详解** 在网页开发中,有时我们需要用户输入IP地址,而标准的HTML输入框并不提供对IP地址格式的验证和美化。为此,开发者常常借助JavaScript库,如jQuery,来实现这样的功能。"JQuery插件...
**jQuery图片预览插件详解** 在Web开发中,图片预览功能是用户交互体验的重要组成部分,尤其是在上传图片或展示图片集时。jQuery作为一个轻量级的JavaScript库,提供了丰富的插件来增强这一功能。本篇文章将深入...
jQuery打印插件jqprint,jquery.jqprint-0.3.js 下载,内包含使用示例,下载解压可直接在浏览器打开使用。 jQuery打印插件jqprint,jquery.jqprint-0.3.js 下载,内包含使用示例,下载解压可直接在浏览器打开使用。 ...