JavaScript 和快捷键

Stephen Hewison

4.50/5 (4投票s)

2010年5月21日

CPOL

1分钟阅读

22467

用于捕获特定键组合的框架。

引言

本文将解释我用于捕获按键的框架。

背景

我最近需要在 HTML 和 JavaScript 中开发一个所见即所得编辑器。通过快捷键访问某些操作比通过编辑器的 UI 效率更高。我想要一种通用的处理方式，因此开发了以下代码。

必备组件

此框架建立在我开发的其它框架之上。在本文中实现代码的页面还必须实现以下框架：

使用代码

我的大多数框架都需要以特定方式配置文档事件。键框架也不例外。此框架绑定到 body 的 onkeydown 和 onkeyup 事件。需要将事件配置如下：

<script language="javascript" type="text/javascript">

var OnBaseKeyDown = new uiEvent();
var OnBaseKeyUp = new uiEvent();

</script>
<body onkeydown="OnBaseKeyDown.Fire(e?e:null);" onkeyup="OnBaseKeyUp.Fire(e?e:null);">

还有其他事件以这种方式配置在完整的框架中，但这些将在相关的文章中介绍。

以下是键框架的 JavaScript 代码。这需要在定义 OnBaseKeyDown 和 OnBaseKeyUp 事件之后添加。

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 的对象。它包含两个属性：Ctrl 和 Shift，可以随时用于检查 Ctrl 和 Shift 按钮的按下状态。

第二个对象是 KeyEventManager。它绑定到页面的按键释放和按键按下事件；它管理 Ctrl 和 Shift 状态，并为任何已注册的键映射引发事件。

还有一个名为 KeyEventMapping 的类。它包含一个名为 OnPress 的事件。这是您注册代码以供执行的事件。

以下示例演示了如何实现快捷键框架：

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