JavaScript和快捷键

分享于 

4分钟阅读

Web开发

  繁體 雙語

介绍

这篇文章将解释我的捕获按键的框架。

Background

我最近不得不在HTML和JavaScript中开发一个所见即所得编辑器。 在快捷键比通过编辑器的UI访问快捷键时,有多个操作更好,更有效率。 我想要一种通用的处理方法,因此开发了以下代码。

前提条件

这个框架建立在我开发的其他框架之上。 实现本文中代码的页面还必须实现以下框架:

使用代码

大多数框架都需要将文档事件配置成特定的方式。 关键框架是不一样的。 这个框架与 bodyonkeydownonkeyup 事件相关联。 需要将事件配置为:

<scriptlanguage="javascript"type="text/javascript">var OnBaseKeyDown = new uiEvent();var OnBaseKeyUp = new uiEvent();</script><bodyonkeydown="OnBaseKeyDown.Fire(e?e:null);"onkeyup="OnBaseKeyUp.Fire(e?e:null);">

在完整的框架中,还有它的他的事件可以被配置,但是这些事件将在它们相关的文章中被。

下面是关键框架的JavaScript。 这需要在 OnBaseKeyDownOnBaseKeyUp 事件的定义之后添加。

var KeyState = {
 Ctrl: false,
 Shift: false}var KeyEventManager = {
 EventMappings: new Array(),
 Add: function(mapping) { this.EventMappings.Add(mapping); },
 KeyUpHandler: function(e) {
 var key = e? e.which : event.keyCode;
 if (key == 17)
 KeyState.Ctrl = false;
 if (key == 16)
 KeyState.Shift = false;
 var sKey = String.fromCharCode(key); 
 for(var x = 0; x <KeyEventManager.EventMappings.length; x++) {
 var em = KeyEventManager.EventMappings[x];
 if(KeyState.Shift == em.Shift && KeyState.Ctrl == 
 em.Ctrl && sKey.toLowerCase() == em.Key.toLowerCase())
 em.OnPress.Fire();
 }
 },
 KeyDownHandler: function(e) {
 var key = e? e.which : event.keyCode;
 if (key == 17)
 KeyState.Ctrl = true;
 if (key == 16)
 KeyState.Shift = true;
 }
}var KeyEventMapping = function(shift, ctrl, key) {
 this.Shift = shift;
 this.Ctrl = ctrl;
 this.Key = key;
 this.OnPress = new uiEvent();
}
OnBaseKeyDown.Register(KeyFrameworkDown);
OnBaseKeyUp.Register(KeyFrameworkUp);

在这个框架中,有一个叫做 KeyState的对象。 它包含两个属性:CtrlShift,可以随时使用它们来检查Ctrl和Shift按钮的按下状态。

第二个对象是 KeyEventManager。 这与页面的键上下事件关联,它管理Ctrl和Shift状态,并引发任何已经注册的键映射事件。

还有一个叫做 KeyEventMapping的类。 这包含一个名为 OnPress的事件。 这是你要为它的执行代码的事件。

以下示例显示了如何实现快捷键框架:

var kem = new KeyEventMapping(false, true, 'g');
kem.OnPress.Register(function() { alert('test'); });
KeyEventManager.Add(kem);

JAVA  Javascript  KEY  Short  keys  快捷键  
相关文章