jquery实现上下左右键盘监听_基于 jQuery 实现键盘事件监听控件

最近项目里要做一个画板,需要对键盘事件进行监听,来进行诸如撤回、重做、移动、缩放等操作,因此顺手实现了一个键盘事件监听控件,期间略有收获,整理出来,希望对大家有所帮助,更希望能获得高手的指点。

1. 自动获取焦点

似乎浏览器的键盘事件只能被那些可以获得焦点的元素设置监听,而通常需要监听事件的

、 元素都不能获得焦点,因此需要修改目标元素的某些属性使其可以获得焦点,另外一种可行的方法是将事件委托给诸如 标签。这里采用的是第一类方法,当然,可以修改的属性也不止一种,例如,对于
标签可以将其 “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){

var code = e.keyCode + '';

var altKey = e.altKey;

var ctrlKey = e.ctrlKey;

var shiftKey = e.shiftKey;

var threeKey = altKey && ctrlKey && shiftKey;

var ctrlAlt = altKey && ctrlKey;

var altShift = altKey && shiftKey;

var ctrlShift = shiftKey && ctrlKey;

var keyTypeSet = this.keyTypeSet;

var resStr = '';

if(threeKey){

resStr = keyTypeSet.threeKey[code];

} else if(ctrlAlt) {

resStr = keyTypeSet.ctrlAlt[code];

} else if(ctrlShift) {

resStr = keyTypeSet.ctrlShift[code];

} else if(altShift) {

resStr = keyTypeSet.altShift[code];

} else if(altKey) {

resStr = keyTypeSet.altKey[code];

} else if(ctrlKey) {

resStr = keyTypeSet.ctrlKey[code];

} else if(shiftKey) {

resStr = keyTypeSet.shiftKey[code];

} else {

resStr = keyTypeSet.singleKey[code];

}

return resStr

};

这里的 keyTypeSet 是一个类似于查找表的对象,里面存储了 ctrl、shift、alt按钮的各种类型组合,每种组合下又分别按照按键码存储一个自定义事件类型字符串,事件发生之后会从这里返回这个字符串,当然,没有对应自定义事件的时候,就老老实实地返回空字符串。

4. 事件分发

_keyCodeProcess 方法从事件中提取出了事件类型,我们提前将监听的回调函数存储在一个查找表 callback 中,并且“巧妙”地使得其键名刚好为自定义事件字符串前面加个“on”前缀,就可以方便地调用了,前述 _keyDownHandler 正是为此而设计的:

function _keyDownHandler(e){

var strCommand = this._keyCodeProcess(e);

var objEvent = {

type: '',

originEvent: e.originEvent

};

strCommand && this.callback['on' + strCommand](objEvent);

return null;

};

5. 事件订阅与解除订阅

前面说了,我们是把回调函数存储起来适时调用的,因此需要对外暴露一个“订阅”接口,让开发者可以方便地把自己的回调函数存储到对象实例中去,为此,我定义了一个 .bind接口:

function bind(type, callback, description){

var allType = this.allEventType;

if(allType.indexOf(type) === -1){

throwError('不支持改事件类型,请先扩展该类型,或采用其他事件类型');

}

if(!(callback instanceof Function)){

throwError('绑定的事件处理回调必须是函数类型');

}

this.callback['on' + type] = callback;

this.eventDiscibeSet[type] = description || '没有该事件的描述';

return this;

};

由于是给人用的,所以顺带做了下类型检查。

根据接口的“对称性”,有订阅最好也有解除订阅,因此定义了 .unbind接口,只有一句代码,实现如下:

function unbind(type){

this.callback['on' + type] = this._emptyEventHandler;

return this;

};

6.扩展自定义事件类型

键盘事件的组合丰富多彩,如果全部内置在控件中的话,会是很臃肿的,因此除了少数几个常见的组合键之外,开发者可以通过 .extendEventType 方法,来自定义组合键和返回的字符串:

function extendEventType(config){

var len = 0;

if(config instanceof Array){

len = config.length;

while(len--){

this._setKeyComposition(config[len]);

}

} else {

this._setKeyComposition(config);

}

return this;

};

其中的 ._setKeyComposition 是一个私有方法,用来写入自定义键盘事件的方法:

_setKeyComposition(config){

var altKey = config.alt;

var ctrlKey = config.ctrl;

var shiftKey = config.shift;

var threeKey = altKey && ctrlKey && shiftKey;

var ctrlAlt = altKey && ctrlKey;

var altShift = altKey && shiftKey;

var ctrlShift = shiftKey && ctrlKey;

var code = config.code + '';

if(threeKey){

this.keyTypeSet.threeKey[code] = config.type;

} else if(ctrlAlt) {

this.keyTypeSet.ctrlAlt[code] = config.type;

} else if(ctrlShift) {

this.keyTypeSet.ctrlShift[code] = config.type;

} else if(altShift) {

this.keyTypeSet.altShift[code] = config.type;

} else if(altKey) {

this.keyTypeSet.altKey[code] = config.type;

} else if(ctrlKey) {

this.keyTypeSet.ctrlKey[code] = config.type;

} else if(shiftKey) {

this.keyTypeSet.shiftKey[code] = config.type;

} else {

this.keyTypeSet.singleKey[code] = config.type;

}

return null;

};

这样,一个键盘事件监听控件就大功告成了,下面是完整实现代码:

/**

* @constructor 键盘事件监听器

* */

function KeyboardListener(param){

this._init(param);

}

!function(){

/**

* @private {String} param.ele 事件对象选择器

* */

KeyboardListener.prototype._init = function _init(param){

this.$ele = $(param.ele);

this._initEvents();

this._initEventType();

return null;

};

/**

* @private _emptyEventHandler 空白事件响应

* */

KeyboardListener.prototype._emptyEventHandler = function _emptyEventHandler(){

return null;

};

/**

* @private _initEventType 初始化所有初始自定义事件类型

* */

KeyboardListener.prototype._initEventType = function _initEventType(){

var allType = ['up', 'down', 'left', 'right', 'undo', 'redo', 'zoomIn', 'zoomOut', 'delete'];

var intLen = allType.length;

this.allEventType = allType;

this.callback = {};

this.eventDiscibeSet = {};

for(var intCnt = 0; intCnt < intLen; intCnt++){

this.callback['on' + allType[intCnt]] = KeyboardListener.prototype._emptyEventHandler;

}

return null;

};

/**

* @private _initEvents 绑定 DOM 事件

* */

KeyboardListener.prototype._initEvents = function _initEvents(){

var $ele = this.$ele;

$ele.attr('tabindex', 1);

$ele.on('mouseenter', function(){

$ele.focus();

});

$ele.on('keydown', this._keyDownHandler.bind(this));

this.keyTypeSet = {

altKey: {},

ctrlAlt: {},

ctrlKey: {},

threeKey: {},

altShift: {},

shiftKey: {},

ctrlShift: {},

singleKey: {}

};

// 支持一些内建的键盘事件类型

this.extendEventType([

{

type: 'redo',

ctrl: true,

shift: true,

code: 90

},

{

type: 'undo',

ctrl: true,

code: 90

},

{

type: 'copy',

ctrl: true,

code: 67

},

{

type: 'paste',

ctrl: true,

code: 86

},

{

type: 'delete',

code: 46

},

{

type: 'right',

code: 39

},

{

type: 'down',

code: 40

},

{

type: 'left',

code: 37

},

{

type: 'up',

code: 38

}

]);

return null;

};

/**

* @private _keyDownHandler 自定义键盘事件分发

* */

KeyboardListener.prototype._keyDownHandler = function _keyDownHandler(e){

var strCommand = this._keyCodeProcess(e);

var objEvent = {

type: '',

originEvent: e.originEvent

};

strCommand && this.callback['on' + strCommand](objEvent);

return null;

};

/**

* @private _keyCodeProcess 处理按键码

* */

KeyboardListener.prototype._keyCodeProcess = function _keyCodeProcess(e){

var code = e.keyCode + '';

var altKey = e.altKey;

var ctrlKey = e.ctrlKey;

var shiftKey = e.shiftKey;

var threeKey = altKey && ctrlKey && shiftKey;

var ctrlAlt = altKey && ctrlKey;

var altShift = altKey && shiftKey;

var ctrlShift = shiftKey && ctrlKey;

var keyTypeSet = this.keyTypeSet;

var resStr = '';

if(threeKey){

resStr = keyTypeSet.threeKey[code];

} else if(ctrlAlt) {

resStr = keyTypeSet.ctrlAlt[code];

} else if(ctrlShift) {

resStr = keyTypeSet.ctrlShift[code];

} else if(altShift) {

resStr = keyTypeSet.altShift[code];

} else if(altKey) {

resStr = keyTypeSet.altKey[code];

} else if(ctrlKey) {

resStr = keyTypeSet.ctrlKey[code];

} else if(shiftKey) {

resStr = keyTypeSet.shiftKey[code];

} else {

resStr = keyTypeSet.singleKey[code];

}

return resStr

};

/**

* @private _setKeyComposition 自定义键盘事件

* @param {Object} 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._setKeyComposition = function _setKeyComposition(config){

var altKey = config.alt;

var ctrlKey = config.ctrl;

var shiftKey = config.shift;

var threeKey = altKey && ctrlKey && shiftKey;

var ctrlAlt = altKey && ctrlKey;

var altShift = altKey && shiftKey;

var ctrlShift = shiftKey && ctrlKey;

var code = config.code + '';

if(threeKey){

this.keyTypeSet.threeKey[code] = config.type;

} else if(ctrlAlt) {

this.keyTypeSet.ctrlAlt[code] = config.type;

} else if(ctrlShift) {

this.keyTypeSet.ctrlShift[code] = config.type;

} else if(altShift) {

this.keyTypeSet.altShift[code] = config.type;

} else if(altKey) {

this.keyTypeSet.altKey[code] = config.type;

} else if(ctrlKey) {

this.keyTypeSet.ctrlKey[code] = config.type;

} else if(shiftKey) {

this.keyTypeSet.shiftKey[code] = config.type;

} else {

this.keyTypeSet.singleKey[code] = config.type;

}

return null;

};

/**

* @method extendEventType 扩展键盘事件类型

* @param {Object|Array} 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 = function extendEventType(config){

var len = 0;

if(config instanceof Array){

len = config.length;

while(len--){

this._setKeyComposition(config[len]);

}

} else {

this._setKeyComposition(config);

}

return this;

};

/**

* @method bind 绑定自定义的键盘事件

* @param {String} type 事件类型 如:['up', 'down', 'left', 'right', 'undo', 'redo', 'delete', zoomIn, 'zoomOut']

* @param {Function} callback 回调函数,参数为一个自定义的仿事件对象

* @param {String} description 对绑定事件的用途进行说明

* */

KeyboardListener.prototype.bind = function bind(type, callback, description){

var allType = this.allEventType;

if(allType.indexOf(type) === -1){

throwError('不支持改事件类型,请先扩展该类型,或采用其他事件类型');

}

if(!(callback instanceof Function)){

throwError('绑定的事件处理回调必须是函数类型');

}

this.callback['on' + type] = callback;

this.eventDiscibeSet[type] = description || '没有该事件的描述';

return this;

};

/**

* @method unbind 解除事件绑定

* @param {String} type 事件类型

* */

KeyboardListener.prototype.unbind = function unbind(type){

this.callback['on' + type] = this._emptyEventHandler;

return this;

};

}();

总结

以上所述是小编给大家介绍的基于 jQuery 实现键盘事件监听控件,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
评论

打赏作者

weixin_39974223

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值