jquery扩展select控件支持enter或focus选择

最新推荐文章于 2025-08-01 09:39:22 发布

原创最新推荐文章于 2025-08-01 09:39:22 发布 · 177 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #select #ViewUI

js 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个名为jQuerySelKeys的jQuery插件，用于处理选择器的键盘事件，包括按下回车键和聚焦事件。插件提供了简洁的API，如`jQuery.selkeys.enter()`和`jQuery.selkeys.focus()`，允许开发者轻松地为HTML元素绑定键盘交互。

/******************************************************************************************************************************

* @ author jdkleo
* @ date 2013/2/27
 
	JQuery SelKeys

USAGE:
   jQuery.selkeys.enter(jQuery("#selcon"));
   jQuery.selkeys.focus(jQuery("#selcon2"));
    
******************************************************************************************************************************/
(function (jQuery){
    this.version = '(beta)(0.0.1)';
	this.all = {};
	/**---------enter---------**/
    this.enter = function(sel){  
		var flag = 1;
		var open = function(){ 
		  if(flag==1){
				sel.get(0).size = sel.get(0).options.length;
				flag=0;
		   }else{
				sel.get(0).size = 1;
				flag=1;
		   }
		};  
		sel.keydown(function(e){  
				e = e ? e :(window.event ? window.event : null); 
				var code = e.keyCode || e.which || e.charCode;
				if(code == 13)
				{
					open();
					return false;
				}
			});
		sel.blur(function(){
					sel.get(0).size=1;
					flag=1;
				 });		  
	} 
	/**---------focus---------**/
	this.focus = function(sel){  
		var flag = 1;
		var open = function(){ 
		  if(flag==1){
				sel.get(0).size = sel.get(0).options.length;
				flag=0;
		   }else{
				sel.get(0).size = 1;
				flag=1;
		   }
		};  
		sel.focus(function(){  
				open();
				return false;
			});
		sel.blur(function(){
				sel.get(0).size=1;
				flag=1;
			});
		sel.keydown(function(e){  
				e = e ? e :(window.event ? window.event : null); 
				var code = e.keyCode || e.which || e.charCode;
				if(code == 13)
				{
					sel.get(0).size=1;
					flag=1;
					return false;
				}
			});
			  
	}
	/**---------all---------**/
    jQuery.selkeys = this;
    return jQuery;    
})(jQuery);