keyboard.js 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
  1. /*
  2. * noVNC: HTML5 VNC client
  3. * Copyright (C) 2019 The noVNC Authors
  4. * Licensed under MPL 2.0 or any later version (see LICENSE.txt)
  5. */
  6. import * as Log from '../util/logging.js';
  7. import { stopEvent } from '../util/events.js';
  8. import * as KeyboardUtil from "./util.js";
  9. import KeyTable from "./keysym.js";
  10. import * as browser from "../util/browser.js";
  11. //
  12. // Keyboard event handler
  13. //
  14. export default class Keyboard {
  15. constructor(target) {
  16. this._target = target || null;
  17. this._keyDownList = {}; // List of depressed keys
  18. // (even if they are happy)
  19. this._altGrArmed = false; // Windows AltGr detection
  20. // keep these here so we can refer to them later
  21. this._eventHandlers = {
  22. 'keyup': this._handleKeyUp.bind(this),
  23. 'keydown': this._handleKeyDown.bind(this),
  24. 'blur': this._allKeysUp.bind(this),
  25. };
  26. // ===== EVENT HANDLERS =====
  27. this.onkeyevent = () => {}; // Handler for key press/release
  28. }
  29. // ===== PRIVATE METHODS =====
  30. _sendKeyEvent(keysym, code, down) {
  31. if (down) {
  32. this._keyDownList[code] = keysym;
  33. } else {
  34. // Do we really think this key is down?
  35. if (!(code in this._keyDownList)) {
  36. return;
  37. }
  38. delete this._keyDownList[code];
  39. }
  40. Log.Debug("onkeyevent " + (down ? "down" : "up") +
  41. ", keysym: " + keysym, ", code: " + code);
  42. this.onkeyevent(keysym, code, down);
  43. }
  44. _getKeyCode(e) {
  45. const code = KeyboardUtil.getKeycode(e);
  46. if (code !== 'Unidentified') {
  47. return code;
  48. }
  49. // Unstable, but we don't have anything else to go on
  50. if (e.keyCode) {
  51. // 229 is used for composition events
  52. if (e.keyCode !== 229) {
  53. return 'Platform' + e.keyCode;
  54. }
  55. }
  56. // A precursor to the final DOM3 standard. Unfortunately it
  57. // is not layout independent, so it is as bad as using keyCode
  58. if (e.keyIdentifier) {
  59. // Non-character key?
  60. if (e.keyIdentifier.substr(0, 2) !== 'U+') {
  61. return e.keyIdentifier;
  62. }
  63. const codepoint = parseInt(e.keyIdentifier.substr(2), 16);
  64. const char = String.fromCharCode(codepoint).toUpperCase();
  65. return 'Platform' + char.charCodeAt();
  66. }
  67. return 'Unidentified';
  68. }
  69. _handleKeyDown(e) {
  70. const code = this._getKeyCode(e);
  71. let keysym = KeyboardUtil.getKeysym(e);
  72. // Windows doesn't have a proper AltGr, but handles it using
  73. // fake Ctrl+Alt. However the remote end might not be Windows,
  74. // so we need to merge those in to a single AltGr event. We
  75. // detect this case by seeing the two key events directly after
  76. // each other with a very short time between them (<50ms).
  77. if (this._altGrArmed) {
  78. this._altGrArmed = false;
  79. clearTimeout(this._altGrTimeout);
  80. if ((code === "AltRight") &&
  81. ((e.timeStamp - this._altGrCtrlTime) < 50)) {
  82. // FIXME: We fail to detect this if either Ctrl key is
  83. // first manually pressed as Windows then no
  84. // longer sends the fake Ctrl down event. It
  85. // does however happily send real Ctrl events
  86. // even when AltGr is already down. Some
  87. // browsers detect this for us though and set the
  88. // key to "AltGraph".
  89. keysym = KeyTable.XK_ISO_Level3_Shift;
  90. } else {
  91. this._sendKeyEvent(KeyTable.XK_Control_L, "ControlLeft", true);
  92. }
  93. }
  94. // We cannot handle keys we cannot track, but we also need
  95. // to deal with virtual keyboards which omit key info
  96. if (code === 'Unidentified') {
  97. if (keysym) {
  98. // If it's a virtual keyboard then it should be
  99. // sufficient to just send press and release right
  100. // after each other
  101. this._sendKeyEvent(keysym, code, true);
  102. this._sendKeyEvent(keysym, code, false);
  103. }
  104. stopEvent(e);
  105. return;
  106. }
  107. // Alt behaves more like AltGraph on macOS, so shuffle the
  108. // keys around a bit to make things more sane for the remote
  109. // server. This method is used by RealVNC and TigerVNC (and
  110. // possibly others).
  111. if (browser.isMac() || browser.isIOS()) {
  112. switch (keysym) {
  113. case KeyTable.XK_Super_L:
  114. keysym = KeyTable.XK_Alt_L;
  115. break;
  116. case KeyTable.XK_Super_R:
  117. keysym = KeyTable.XK_Super_L;
  118. break;
  119. case KeyTable.XK_Alt_L:
  120. keysym = KeyTable.XK_Mode_switch;
  121. break;
  122. case KeyTable.XK_Alt_R:
  123. keysym = KeyTable.XK_ISO_Level3_Shift;
  124. break;
  125. }
  126. }
  127. // Is this key already pressed? If so, then we must use the
  128. // same keysym or we'll confuse the server
  129. if (code in this._keyDownList) {
  130. keysym = this._keyDownList[code];
  131. }
  132. // macOS doesn't send proper key events for modifiers, only
  133. // state change events. That gets extra confusing for CapsLock
  134. // which toggles on each press, but not on release. So pretend
  135. // it was a quick press and release of the button.
  136. if ((browser.isMac() || browser.isIOS()) && (code === 'CapsLock')) {
  137. this._sendKeyEvent(KeyTable.XK_Caps_Lock, 'CapsLock', true);
  138. this._sendKeyEvent(KeyTable.XK_Caps_Lock, 'CapsLock', false);
  139. stopEvent(e);
  140. return;
  141. }
  142. // Windows doesn't send proper key releases for a bunch of
  143. // Japanese IM keys so we have to fake the release right away
  144. const jpBadKeys = [ KeyTable.XK_Zenkaku_Hankaku,
  145. KeyTable.XK_Eisu_toggle,
  146. KeyTable.XK_Katakana,
  147. KeyTable.XK_Hiragana,
  148. KeyTable.XK_Romaji ];
  149. if (browser.isWindows() && jpBadKeys.includes(keysym)) {
  150. this._sendKeyEvent(keysym, code, true);
  151. this._sendKeyEvent(keysym, code, false);
  152. stopEvent(e);
  153. return;
  154. }
  155. stopEvent(e);
  156. // Possible start of AltGr sequence? (see above)
  157. if ((code === "ControlLeft") && browser.isWindows() &&
  158. !("ControlLeft" in this._keyDownList)) {
  159. this._altGrArmed = true;
  160. this._altGrTimeout = setTimeout(this._handleAltGrTimeout.bind(this), 100);
  161. this._altGrCtrlTime = e.timeStamp;
  162. return;
  163. }
  164. this._sendKeyEvent(keysym, code, true);
  165. }
  166. _handleKeyUp(e) {
  167. stopEvent(e);
  168. const code = this._getKeyCode(e);
  169. // We can't get a release in the middle of an AltGr sequence, so
  170. // abort that detection
  171. if (this._altGrArmed) {
  172. this._altGrArmed = false;
  173. clearTimeout(this._altGrTimeout);
  174. this._sendKeyEvent(KeyTable.XK_Control_L, "ControlLeft", true);
  175. }
  176. // See comment in _handleKeyDown()
  177. if ((browser.isMac() || browser.isIOS()) && (code === 'CapsLock')) {
  178. this._sendKeyEvent(KeyTable.XK_Caps_Lock, 'CapsLock', true);
  179. this._sendKeyEvent(KeyTable.XK_Caps_Lock, 'CapsLock', false);
  180. return;
  181. }
  182. this._sendKeyEvent(this._keyDownList[code], code, false);
  183. // Windows has a rather nasty bug where it won't send key
  184. // release events for a Shift button if the other Shift is still
  185. // pressed
  186. if (browser.isWindows() && ((code === 'ShiftLeft') ||
  187. (code === 'ShiftRight'))) {
  188. if ('ShiftRight' in this._keyDownList) {
  189. this._sendKeyEvent(this._keyDownList['ShiftRight'],
  190. 'ShiftRight', false);
  191. }
  192. if ('ShiftLeft' in this._keyDownList) {
  193. this._sendKeyEvent(this._keyDownList['ShiftLeft'],
  194. 'ShiftLeft', false);
  195. }
  196. }
  197. }
  198. _handleAltGrTimeout() {
  199. this._altGrArmed = false;
  200. clearTimeout(this._altGrTimeout);
  201. this._sendKeyEvent(KeyTable.XK_Control_L, "ControlLeft", true);
  202. }
  203. _allKeysUp() {
  204. Log.Debug(">> Keyboard.allKeysUp");
  205. for (let code in this._keyDownList) {
  206. this._sendKeyEvent(this._keyDownList[code], code, false);
  207. }
  208. Log.Debug("<< Keyboard.allKeysUp");
  209. }
  210. // ===== PUBLIC METHODS =====
  211. grab() {
  212. //Log.Debug(">> Keyboard.grab");
  213. this._target.addEventListener('keydown', this._eventHandlers.keydown);
  214. this._target.addEventListener('keyup', this._eventHandlers.keyup);
  215. // Release (key up) if window loses focus
  216. window.addEventListener('blur', this._eventHandlers.blur);
  217. //Log.Debug("<< Keyboard.grab");
  218. }
  219. ungrab() {
  220. //Log.Debug(">> Keyboard.ungrab");
  221. this._target.removeEventListener('keydown', this._eventHandlers.keydown);
  222. this._target.removeEventListener('keyup', this._eventHandlers.keyup);
  223. window.removeEventListener('blur', this._eventHandlers.blur);
  224. // Release (key up) all keys that are in a down state
  225. this._allKeysUp();
  226. //Log.Debug(">> Keyboard.ungrab");
  227. }
  228. }