`

Jquery 判断是否锁定大小写键插件

阅读更多

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);
分享到:
评论
3 楼 cjh326419411 2012-08-22  
如果调用啊 ,$("#vcLoginPwd").capsLockTip({width:"200px",text:"error"}); 没用啊
2 楼 HappyWaterLife 2012-04-27  
my249645546 写道
text-transform:uppercase; 大写
text-transform:lowercase; 小写

css一句话搞定的事情 弄得这么复杂 服了你了

不是限定输入是否是大小写,而是判断是否锁定大小写键(Caps Lock键),做出友好提示。
1 楼 my249645546 2012-04-26  
text-transform:uppercase; 大写
text-transform:lowercase; 小写

css一句话搞定的事情 弄得这么复杂 服了你了

相关推荐

    jquery。键盘插件

    此外,还可以利用插件提供的配置选项来控制键盘的行为,比如是否显示小键盘、设置默认输入类型等。 总的来说,jQuery键盘插件是一个实用的工具,能够增强网页应用的交互性,特别是在需要用户频繁输入数据的场景下。...

    jquery插件库(jquery.treeview插件库)

    jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....

    jQueryUI jQueryUI插件 键盘插件

    在Web开发中,jQueryUI提供了诸如对话框、拖放、排序、日期选择器等多种交互式元素,极大地提升了用户体验。而“jQueryUI键盘插件”是jQueryUI生态系统中的一个特色组件,主要用于模拟和自定义虚拟键盘。 这个键盘...

    jQuery的车牌插件

    4. **兼容性**:由于是基于jQuery开发,所以该插件应具有良好的浏览器兼容性,能够在大部分现代浏览器上正常工作,包括桌面和移动端。 5. **易于集成**:作为一款jQuery插件,它应该提供简单的API接口和配置选项,...

    jquery插件库大全(200个).zip

    jquery插件库大全(200个): jqueryQQ表情插件 jquery下拉菜单导航 jquery下拉菜单栏 jquery仿Windows系统选中图标效果 jquery仿京东商品详情页图片放大效果 jquery仿百度新闻焦点轮播 jquery分离布局模版 jquery...

    jQuery Keypad网页小键盘(安全键盘插件).rar

    jQuery网页小键盘插件 Keypad安全键盘插件调用示例代码,类似于一个网页计算器那样,或者说是一个软键盘,用于对输入安全要求较高的场合。这个小键盘样式上比较简洁,美化还可以再加强一些,兼容性还是挺好的。

    orgchart.js 组织架构图之JQuery插件

    组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件...

    jQuery模拟键盘打字插件typetype.zip

    jQuery模拟键盘打字插件typetype是一款jQuery插件,模拟人的打字动画效果。

    jQuery俩张图片局部放大预览插件.rar

    jQuery俩张图片局部放大预览插件.rar jQuery俩张图片局部放大预览插件.rar jQuery俩张图片局部放大预览插件.rar jQuery俩张图片局部放大预览插件.rar jQuery俩张图片局部放大预览插件.rar jQuery俩张图片局部放大...

    jQuery区分大小写验证码输入框.zip

    在本案例中,jQuery被用来增强验证码输入框的功能,提供区分大小写的验证规则,这意味着用户必须按照指定的大小写顺序输入验证码,从而增加了破解的难度。 这款插件的工作原理可能包括以下几点: 1. **生成验证码*...

    jquery锁定行锁定列

    总结来说,"jquery锁定行锁定列"是一种提高用户体验的网页开发技术,通过使用jQuery和特定的插件(如frozenTable),可以在各种主流浏览器上实现表格的冻结和锁定功能,使得用户在查看大量数据时能够更方便地浏览和...

    jQuery插件jQuery插件

    jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件

    jquery插件库-jquery仿京东商品详情页图片放大效果.zip

    1. **图片预加载**:在用户需要查看大图之前,插件会先加载图片的较小版本,然后在用户交互时快速加载大图,以减少页面加载时间。 2. **放大镜效果**:当鼠标悬停在图片上时,显示一个透明的放大镜区域,展示图片的...

    jquery插件库-jquery抽奖插件.zip

    《jQuery抽奖插件详解及其在网页设计中的应用》 jQuery,作为一款强大的JavaScript库,极大地简化了DOM操作、事件处理、动画设计等任务,深受Web开发者喜爱。在网页设计领域,jQuery抽奖插件是实现互动体验、提升...

    jquery写的js调试插件

    "jQuery写的js调试插件"就是这样一个工具,它借鉴了Java中的日志框架log4j的概念,旨在提供更直观、灵活的JS调试体验。 **主要特点:** 1. **依赖jQuery**:这个插件基于jQuery构建,这意味着你需要在项目中引入...

    jquery-大文件上传插件,支持分片上传,断点续传

    "jquery-大文件上传插件,支持分片上传,断点续传"就是这样一个解决方案,它针对大文件上传进行了优化,确保了高效且用户友好的体验。 这个插件的核心特性包括: 1. **分片上传**:由于大文件一次性上传可能会导致...

    jQuery1.3 DW插件

    **jQuery1.3 DW插件** 是一个专为Dreamweaver(DW)用户设计的扩展,主要用于提升在DW环境中编写jQuery代码的效率。这个插件是针对DW CS3版本优化的,它集成了jQuery 1.3版本的功能,提供了一个方便的自动提示工具,...

    jquery点击图片放大插件——即插即用.zip

    这个点击图片放大插件就是典型的jQuery插件,它利用jQuery提供的API和事件处理机制,实现了图片的动态放大与缩小效果。 三、插件实现原理 1. 图片绑定事件:首先,插件会为页面中的所有图片元素绑定点击事件。当...

    jquery.hotkeys插件键盘按键监听事件代码

    `jquery.hotkeys`插件的核心在于它可以监听到键盘上按下和释放的单个键,以及复杂的组合键,如Ctrl + S、Alt + F4等。这些组合键可以被映射到特定的函数或行为,提升用户体验,让用户可以通过键盘快速执行命令,而...

    JQuery插件 IP地址输入框

    **jQuery IP地址输入框插件详解** 在网页开发中,有时我们需要用户输入IP地址,而标准的HTML输入框并不提供对IP地址格式的验证和美化。为此,开发者常常借助JavaScript库,如jQuery,来实现这样的功能。"JQuery插件...

Global site tag (gtag.js) - Google Analytics