标签可以将其“editable”属性设为true，而这里采用的是给其设一个tabindex值。代码如下：
$ele.attr('tabindex',1);
另外，焦点事件的触发需要点击元素或者TAB切换，而这并不符合人类的直觉，因此需要监听鼠标移入事件，使目标元素“自动”地获得焦点：
$ele.on('mouseenter',function(){
$ele.focus();
});
2.监听键盘事件
由于项目面向的客户所使用的浏览器以chrome为主(实际上是36x浏览器)，因此没有针对浏览器做任何适配，仅仅使用了jQuery的事件监听：
$ele.on('keydown',this._keyDownHandler.bind(this));
由于实现是控件化的，所以定义了一个私有方法_keyDownHandler来响应键盘的动作。
3.按键事件甄别
jQuery事件监听器返回的事件对象信息较多，因此需要进行甄别，为此定义了一个私有方法_keyCodeProcess来处理按键
function_keyCodeProcess(e){
varcode=e.keyCode+'';
varaltKey=e.altKey;
varctrlKey=e.ctrlKey;
varshiftKey=e.shiftKey;
varthreeKey=altKey&&ctrlKey&&shiftKey;
varctrlAlt=altKey&&ctrlKey;
varaltShift=altKey&&shiftKey;
varctrlShift=shiftKey&&ctrlKey;
varkeyTypeSet=this.keyTypeSet;
varresStr='';
if(threeKey){
resStr=keyTypeSet.threeKey[code];
}elseif(ctrlAlt){
resStr=keyTypeSet.ctrlAlt[code];
}elseif(ctrlShift){
resStr=keyTypeSet.ctrlShift[code];
}elseif(altShift){
resStr=keyTypeSet.altShift[code];
}elseif(altKey){
resStr=keyTypeSet.altKey[code];
}elseif(ctrlKey){
resStr=keyTypeSet.ctrlKey[code];
}elseif(shiftKey){
resStr=keyTypeSet.shiftKey[code];
}else{
resStr=keyTypeSet.singleKey[code];
}
returnresStr
};
这里的keyTypeSet是一个类似于查找表的对象，里面存储了ctrl、shift、alt按钮的各种类型组合，每种组合下又分别按照按键码存储一个自定义事件类型字符串，事件发生之后会从这里返回这个字符串，当然，没有对应自定义事件的时候，就老老实实地返回空字符串。
4.事件分发
_keyCodeProcess方法从事件中提取出了事件类型，我们提前将监听的回调函数存储在一个查找表callback中，并且“巧妙”地使得其键名刚好为自定义事件字符串前面加个“on”前缀，就可以方便地调用了，前述_keyDownHandler正是为此而设计的：
function_keyDownHandler(e){
varstrCommand=this._keyCodeProcess(e);
varobjEvent={
type:'',
originEvent:e.originEvent
};
strCommand&&this.callback['on'+strCommand](objEvent);
returnnull;
};
5.事件订阅与解除订阅
前面说了，我们是把回调函数存储起来适时调用的，因此需要对外暴露一个“订阅”接口，让开发者可以方便地把自己的回调函数存储到对象实例中去，为此，我定义了一个.bind接口：
functionbind(type,callback,description){
varallType=this.allEventType;
if(allType.indexOf(type)===-1){
throwError('不支持改事件类型，请先扩展该类型，或采用其他事件类型');
}
if(!(callbackinstanceofFunction)){
throwError('绑定的事件处理回调必须是函数类型');
}
this.callback['on'+type]=callback;
this.eventDiscibeSet[type]=description||'没有该事件的描述';
returnthis;
};
由于是给人用的，所以顺带做了下类型检查。
根据接口的“对称性”，有订阅最好也有解除订阅，因此定义了.unbind接口，只有一句代码，实现如下：
functionunbind(type){
this.callback['on'+type]=this._emptyEventHandler;
returnthis;
};
6.扩展自定义事件类型
键盘事件的组合丰富多彩，如果全部内置在控件中的话，会是很臃肿的，因此除了少数几个常见的组合键之外，开发者可以通过.extendEventType方法，来自定义组合键和返回的字符串：
functionextendEventType(config){
varlen=0;
if(configinstanceofArray){
len=config.length;
while(len--){
this._setKeyComposition(config[len]);
}
}else{
this._setKeyComposition(config);
}
returnthis;
};
其中的._setKeyComposition是一个私有方法，用来写入自定义键盘事件的方法：
_setKeyComposition(config){
varaltKey=config.alt;
varctrlKey=config.ctrl;
varshiftKey=config.shift;
varthreeKey=altKey&&ctrlKey&&shiftKey;
varctrlAlt=altKey&&ctrlKey;
varaltShift=altKey&&shiftKey;
varctrlShift=shiftKey&&ctrlKey;
varcode=config.code+'';
if(threeKey){
this.keyTypeSet.threeKey[code]=config.type;
}elseif(ctrlAlt){
this.keyTypeSet.ctrlAlt[code]=config.type;
}elseif(ctrlShift){
this.keyTypeSet.ctrlShift[code]=config.type;
}elseif(altShift){
this.keyTypeSet.altShift[code]=config.type;
}elseif(altKey){
this.keyTypeSet.altKey[code]=config.type;
}elseif(ctrlKey){
this.keyTypeSet.ctrlKey[code]=config.type;
}elseif(shiftKey){
this.keyTypeSet.shiftKey[code]=config.type;
}else{
this.keyTypeSet.singleKey[code]=config.type;
}
returnnull;
};
这样，一个键盘事件监听控件就大功告成了，下面是完整实现代码：
/**
*@constructor键盘事件监听器
**/
functionKeyboardListener(param){
this._init(param);
}
!function(){
/**
*@private{String}param.ele事件对象选择器
**/
KeyboardListener.prototype._init=function_init(param){
this.$ele=$(param.ele);
this._initEvents();
this._initEventType();
returnnull;
};
/**
*@private_emptyEventHandler空白事件响应
**/
KeyboardListener.prototype._emptyEventHandler=function_emptyEventHandler(){
returnnull;
};
/**
*@private_initEventType初始化所有初始自定义事件类型
**/
KeyboardListener.prototype._initEventType=function_initEventType(){
varallType=['up','down','left','right','undo','redo','zoomIn','zoomOut','delete'];
varintLen=allType.length;
this.allEventType=allType;
this.callback={};
this.eventDiscibeSet={};
for(varintCnt=0;intCnt}config键盘事件配置方案
*@param{String}config.type自定义事件类型
*@param{keyCode}config.code按键的码值
*@param{Boolean}[config.ctrl]是否与Ctrl形成组合键
*@param{Boolean}[config.alt]是否与Alt形成组合键
*@param{Boolean}[config.shift]是否与Shift形成组合键
**/
KeyboardListener.prototype.extendEventType=functionextendEventType(config){
varlen=0;
if(configinstanceofArray){
len=config.length;
while(len--){
this._setKeyComposition(config[len]);
}
}else{
this._setKeyComposition(config);
}
returnthis;
};
/**
*@methodbind绑定自定义的键盘事件
*@param{String}type事件类型如：['up','down','left','right','undo','redo','delete',zoomIn,'zoomOut']
*@param{Function}callback回调函数，参数为一个自定义的仿事件对象
*@param{String}description对绑定事件的用途进行说明
**/
KeyboardListener.prototype.bind=functionbind(type,callback,description){
varallType=this.allEventType;
if(allType.indexOf(type)===-1){
throwError('不支持改事件类型，请先扩展该类型，或采用其他事件类型');
}
if(!(callbackinstanceofFunction)){
throwError('绑定的事件处理回调必须是函数类型');
}
this.callback['on'+type]=callback;
this.eventDiscibeSet[type]=description||'没有该事件的描述';
returnthis;
};
/**
*@methodunbind解除事件绑定
*@param{String}type事件类型
**/
KeyboardListener.prototype.unbind=functionunbind(type){
this.callback['on'+type]=this._emptyEventHandler;
returnthis;
};
}();
总结
以上所述是小编给大家介绍的基于jQuery实现键盘事件监听控件，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。
