2007/01/25

Firefox 的按鍵事件簿

在以 firefox/embedded mozilla 當 UI 或是設計網頁時，按鍵是非常需要處理的元件，底下的程式碼目前只能處理任意按鍵，可自行下載修改成讓物件只聆聽特殊按件。測試網頁在註解中。


// Author: wade.fs@gmail.com
// Version: v0.1 20070126
// Code licensed under GPL
// Desc: javascript keyboard event handler
//  預計將來會處理中文輸入法，目前只有簡單的按鍵處理
/*
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>WadeFS</TITLE>
<script type="text/javascript" src="js/key.js"></script>

<script type="text/javascript">
  var ob = {
    'A': "a char A",
    'Z': "other char",
  };
  function act(o, keyCode, status) {
    if (keyCode == 65) { alert (o['A']); }
    else { alert (o['Z']); }
  }
  function init() {
    document.onkeydown = Key.pressed;
    Key.addListener(act, ob, ""); // register any key for ob
  }
</script>
</HEAD>
<BODY id="ss-body" onLoad="init()">
</BODY>
</HTML>
*/
var Key = {
  status: 0, // NumLock, CapsLock, ScrollLock, Full(全半)
  registered: [],
  keyCode: 0,
  addListener: function(f, o, keys) {
    this.registered.push ([f, o, keys]);
    return this.registered.length;
  },
  setNumLock: function(numLock) {
    if (numLock) { this.status |= 0x01; }
    else { this.status &= 0xFE; }
  },
  getNumLock: function() {
    return this.status &= 0x01;
  },
  setCapsLock: function(capsLock) {
    if (capsLock) { this.status |= 0x02; }
    else { this.status &= 0xFD; }
  },
  getCapsLock: function() {
    return this.status &= 0x02;
  },
  setScrollLock: function(scrollLock) {
    if (scrollLock) { this.status |= 0x04; }
    else { this.status &= 0xFB; }
  },
  getScrollLock: function() {
    return this.status &= 0x04;
  },
  keyName: { 8: "BackSpace", 9: "Tab", 13: "Enter", 19: "Pause", 27: "Esc",
             32: "Space", 33: "PgUp", 34: "PgDn", 35: "End", 36: "Home",
             37: "Left", 38: "Up", 39: "Right", 40: "Down", 44: "PrintScreen",
             45: "Ins", 46: "Del", 106: "NMultiply", 107: "NPlus",
             109: "NMinus", 110: "NDot", 111: "NDivide",
  },
  showKeyMsg: function() {
    var keyCode = this.keyCode & 0xFF;
    if (keyCode > 0) {
      var msg='(';
      msg += (this.status & 0x01) ? 'N' : 'n';
      msg += (this.status & 0x02) ? 'C' : 'c';
      msg += (this.status & 0x04) ? 'S' : 's';
      msg += ')';
      if (this.keyCode & 0x100) msg += 's';
      if (this.keyCode & 0x200) msg += 'c';
      if (this.keyCode & 0x400) msg += 'a';
      if (this.keyCode >= 0x100) msg += '-';
      // 數字鍵
      if (keyCode >= 96 && keyCode <= 105) { keyCode -= 48; }
      // 文數字
      if ((keyCode >= 65 && keyCode <= 90) ||
          (keyCode >= 48 && keyCode <= 57))
      {
        msg += String.fromCharCode(keyCode);
      }
      // F1-F12
      else if (keyCode >= 112 && keyCode <= 123) {
        keyCode -= 111;
        msg += 'F' + keyCode;
      }
      else if (typeof (this.keyName[""+keyCode]) != "undefined") {
        msg += this.keyName[""+keyCode];
      }
      else { msg += keyCode; }
      alert (msg);
    }
  },
  processKey: function() {
    if (this.registered.length <= 0) { this.showKeyMsg(); }
    else {
      // [[f, o, key],...]
      var idx;
      for (idx=0; idx<this.registered.length; idx++) {
        if (this.registered[idx][2].length == 0) { // for any key
          var f = this.registered[idx][0];
          var o = this.registered[idx][1];
          f(o, this.keyCode, this.status);
        }
      }
    }
  },
  pushKey: function(key,shift,ctrl,alt) {
    this.keyCode = 0;
    if (key == this.K_NumLock) { this.status ^= 0x01; }
    else if (key == this.K_Caps) { this.status ^= 0x02; }
    else if (key == this.K_ScrollLock) { this.status ^= 0x04; }
    else {
      var ctrlKey = 0;
      // check if composed with control key
      if (shift) { ctrlKey |= 0x100; }
      if (ctrl) { ctrlKey |= 0x200; }
      if (alt) { ctrlKey |= 0x400; }
      // check if control key only
      if (key == this.K_Shift) { this.keyCode = 0x100 | ctrlKey; }
      else if (key == this.K_Ctrl) { this.keyCode = 0x200 | ctrlKey; }
      else if (key == this.K_Alt) { this.keyCode = 0x400 | ctrlKey; }
      else if (key == this.K_shiftAlt) { this.keyCode = 0x100|0x300|ctrlKey; }
      else {
        this.keyCode = key | ctrlKey;
      }
      this.processKey();
    }
  },
  pressed: function(e){
    Key.pushKey(e.keyCode, e.shiftKey, e.ctrlKey, e.altKey);
    // stop key event propagation to browser
    e.preventDefault();
    e.stopPropagation();
  },
  K_: function(ctrl) {
    var i=0, keyCode=0;
    while (i < ctrl.length) {
      if (ctrl.charCodeAt(i) == 'a') { keyCode += 0x400; }
      else if (ctrl.charCodeAt(i) == 'c') { keyCode += 0x200; }
      else if (ctrl.charCodeAt(i) == 's') { keyCode += 0x100; }
      else if (i == (ctrl.length-1)) { keyCode += ctrl.charCodeAt(i); }
      else { keyCode = 0; }
    }
    return keyCode;
  },
  K_BackSpace: 8,
  K_Tab: 9,
  K_Enter: 13,
  K_Shift: 16,
  K_Ctrl: 17,
  K_Alt: 18,
  K_Pause: 19,
  K_Caps: 20,
  K_Esc: 27,
  K_Space: 32,
  K_PgUp: 33,
  K_PgDn: 34,
  K_End: 35,
  K_Home: 36,
  K_Left: 37,
  K_Up: 38,
  K_Right: 39,
  K_Down: 40,
  K_PrintScreen: 44,
  K_Ins: 45,
  K_Del: 46,
  K_N0: 96,
  K_N1: 97,
  K_N2: 98,
  K_N3: 99,
  K_N4: 100,
  K_N5: 101,
  K_N6: 102,
  K_N7: 103,
  K_N8: 104,
  K_N9: 105,
  K_NMultiply: 106,
  K_NPlus: 107,
  K_NMinus: 109,
  K_NDot: 110,
  K_NDivide: 111,
  K_F1: 112,
  K_F2: 113,
  K_F3: 114,
  K_F4: 115,
  K_F5: 116,
  K_F6: 117,
  K_F7: 118,
  K_F8: 119,
  K_F9: 120,
  K_F10: 121,
  K_F11: 122,
  K_F12: 123,
  K_NumLock: 144,
  K_ScrollLock: 145,
  K_shiftAlt: 224,
};
張貼者： 菠蘿麵包 於 1/25/2007

0 意見:

張貼留言

訂閱： 張貼留言 (Atom)