keyhandler.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551
  1. // Copyright 2007 The Closure Library Authors. All Rights Reserved.
  2. //
  3. // Licensed under the Apache License, Version 2.0 (the "License");
  4. // you may not use this file except in compliance with the License.
  5. // You may obtain a copy of the License at
  6. //
  7. // http://www.apache.org/licenses/LICENSE-2.0
  8. //
  9. // Unless required by applicable law or agreed to in writing, software
  10. // distributed under the License is distributed on an "AS-IS" BASIS,
  11. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12. // See the License for the specific language governing permissions and
  13. // limitations under the License.
  14. /**
  15. * @fileoverview This file contains a class for working with keyboard events
  16. * that repeat consistently across browsers and platforms. It also unifies the
  17. * key code so that it is the same in all browsers and platforms.
  18. *
  19. * Different web browsers have very different keyboard event handling. Most
  20. * importantly is that only certain browsers repeat keydown events:
  21. * IE, Opera, FF/Win32, and Safari 3 repeat keydown events.
  22. * FF/Mac and Safari 2 do not.
  23. *
  24. * For the purposes of this code, "Safari 3" means WebKit 525+, when WebKit
  25. * decided that they should try to match IE's key handling behavior.
  26. * Safari 3.0.4, which shipped with Leopard (WebKit 523), has the
  27. * Safari 2 behavior.
  28. *
  29. * Firefox, Safari, Opera prevent on keypress
  30. *
  31. * IE prevents on keydown
  32. *
  33. * Firefox does not fire keypress for shift, ctrl, alt
  34. * Firefox does fire keydown for shift, ctrl, alt, meta
  35. * Firefox does not repeat keydown for shift, ctrl, alt, meta
  36. *
  37. * Firefox does not fire keypress for up and down in an input
  38. *
  39. * Opera fires keypress for shift, ctrl, alt, meta
  40. * Opera does not repeat keypress for shift, ctrl, alt, meta
  41. *
  42. * Safari 2 and 3 do not fire keypress for shift, ctrl, alt
  43. * Safari 2 does not fire keydown for shift, ctrl, alt
  44. * Safari 3 *does* fire keydown for shift, ctrl, alt
  45. *
  46. * IE provides the keycode for keyup/down events and the charcode (in the
  47. * keycode field) for keypress.
  48. *
  49. * Mozilla provides the keycode for keyup/down and the charcode for keypress
  50. * unless it's a non text modifying key in which case the keycode is provided.
  51. *
  52. * Safari 3 provides the keycode and charcode for all events.
  53. *
  54. * Opera provides the keycode for keyup/down event and either the charcode or
  55. * the keycode (in the keycode field) for keypress events.
  56. *
  57. * Firefox x11 doesn't fire keydown events if a another key is already held down
  58. * until the first key is released. This can cause a key event to be fired with
  59. * a keyCode for the first key and a charCode for the second key.
  60. *
  61. * Safari in keypress
  62. *
  63. * charCode keyCode which
  64. * ENTER: 13 13 13
  65. * F1: 63236 63236 63236
  66. * F8: 63243 63243 63243
  67. * ...
  68. * p: 112 112 112
  69. * P: 80 80 80
  70. *
  71. * Firefox, keypress:
  72. *
  73. * charCode keyCode which
  74. * ENTER: 0 13 13
  75. * F1: 0 112 0
  76. * F8: 0 119 0
  77. * ...
  78. * p: 112 0 112
  79. * P: 80 0 80
  80. *
  81. * Opera, Mac+Win32, keypress:
  82. *
  83. * charCode keyCode which
  84. * ENTER: undefined 13 13
  85. * F1: undefined 112 0
  86. * F8: undefined 119 0
  87. * ...
  88. * p: undefined 112 112
  89. * P: undefined 80 80
  90. *
  91. * IE7, keydown
  92. *
  93. * charCode keyCode which
  94. * ENTER: undefined 13 undefined
  95. * F1: undefined 112 undefined
  96. * F8: undefined 119 undefined
  97. * ...
  98. * p: undefined 80 undefined
  99. * P: undefined 80 undefined
  100. *
  101. * @author arv@google.com (Erik Arvidsson)
  102. * @author eae@google.com (Emil A Eklund)
  103. * @see ../demos/keyhandler.html
  104. */
  105. goog.provide('goog.events.KeyEvent');
  106. goog.provide('goog.events.KeyHandler');
  107. goog.provide('goog.events.KeyHandler.EventType');
  108. goog.require('goog.events');
  109. goog.require('goog.events.BrowserEvent');
  110. goog.require('goog.events.EventTarget');
  111. goog.require('goog.events.EventType');
  112. goog.require('goog.events.KeyCodes');
  113. goog.require('goog.userAgent');
  114. /**
  115. * A wrapper around an element that you want to listen to keyboard events on.
  116. * @param {Element|Document=} opt_element The element or document to listen on.
  117. * @param {boolean=} opt_capture Whether to listen for browser events in
  118. * capture phase (defaults to false).
  119. * @constructor
  120. * @extends {goog.events.EventTarget}
  121. * @final
  122. */
  123. goog.events.KeyHandler = function(opt_element, opt_capture) {
  124. goog.events.EventTarget.call(this);
  125. if (opt_element) {
  126. this.attach(opt_element, opt_capture);
  127. }
  128. };
  129. goog.inherits(goog.events.KeyHandler, goog.events.EventTarget);
  130. /**
  131. * This is the element that we will listen to the real keyboard events on.
  132. * @type {Element|Document|null}
  133. * @private
  134. */
  135. goog.events.KeyHandler.prototype.element_ = null;
  136. /**
  137. * The key for the key press listener.
  138. * @type {goog.events.Key}
  139. * @private
  140. */
  141. goog.events.KeyHandler.prototype.keyPressKey_ = null;
  142. /**
  143. * The key for the key down listener.
  144. * @type {goog.events.Key}
  145. * @private
  146. */
  147. goog.events.KeyHandler.prototype.keyDownKey_ = null;
  148. /**
  149. * The key for the key up listener.
  150. * @type {goog.events.Key}
  151. * @private
  152. */
  153. goog.events.KeyHandler.prototype.keyUpKey_ = null;
  154. /**
  155. * Used to detect keyboard repeat events.
  156. * @private
  157. * @type {number}
  158. */
  159. goog.events.KeyHandler.prototype.lastKey_ = -1;
  160. /**
  161. * Keycode recorded for key down events. As most browsers don't report the
  162. * keycode in the key press event we need to record it in the key down phase.
  163. * @private
  164. * @type {number}
  165. */
  166. goog.events.KeyHandler.prototype.keyCode_ = -1;
  167. /**
  168. * Alt key recorded for key down events. FF on Mac does not report the alt key
  169. * flag in the key press event, we need to record it in the key down phase.
  170. * @type {boolean}
  171. * @private
  172. */
  173. goog.events.KeyHandler.prototype.altKey_ = false;
  174. /**
  175. * Enum type for the events fired by the key handler
  176. * @enum {string}
  177. */
  178. goog.events.KeyHandler.EventType = {
  179. KEY: 'key'
  180. };
  181. /**
  182. * An enumeration of key codes that Safari 2 does incorrectly
  183. * @type {Object}
  184. * @private
  185. */
  186. goog.events.KeyHandler.safariKey_ = {
  187. '3': goog.events.KeyCodes.ENTER, // 13
  188. '12': goog.events.KeyCodes.NUMLOCK, // 144
  189. '63232': goog.events.KeyCodes.UP, // 38
  190. '63233': goog.events.KeyCodes.DOWN, // 40
  191. '63234': goog.events.KeyCodes.LEFT, // 37
  192. '63235': goog.events.KeyCodes.RIGHT, // 39
  193. '63236': goog.events.KeyCodes.F1, // 112
  194. '63237': goog.events.KeyCodes.F2, // 113
  195. '63238': goog.events.KeyCodes.F3, // 114
  196. '63239': goog.events.KeyCodes.F4, // 115
  197. '63240': goog.events.KeyCodes.F5, // 116
  198. '63241': goog.events.KeyCodes.F6, // 117
  199. '63242': goog.events.KeyCodes.F7, // 118
  200. '63243': goog.events.KeyCodes.F8, // 119
  201. '63244': goog.events.KeyCodes.F9, // 120
  202. '63245': goog.events.KeyCodes.F10, // 121
  203. '63246': goog.events.KeyCodes.F11, // 122
  204. '63247': goog.events.KeyCodes.F12, // 123
  205. '63248': goog.events.KeyCodes.PRINT_SCREEN, // 44
  206. '63272': goog.events.KeyCodes.DELETE, // 46
  207. '63273': goog.events.KeyCodes.HOME, // 36
  208. '63275': goog.events.KeyCodes.END, // 35
  209. '63276': goog.events.KeyCodes.PAGE_UP, // 33
  210. '63277': goog.events.KeyCodes.PAGE_DOWN, // 34
  211. '63289': goog.events.KeyCodes.NUMLOCK, // 144
  212. '63302': goog.events.KeyCodes.INSERT // 45
  213. };
  214. /**
  215. * An enumeration of key identifiers currently part of the W3C draft for DOM3
  216. * and their mappings to keyCodes.
  217. * http://www.w3.org/TR/DOM-Level-3-Events/keyset.html#KeySet-Set
  218. * This is currently supported in Safari and should be platform independent.
  219. * @type {Object}
  220. * @private
  221. */
  222. goog.events.KeyHandler.keyIdentifier_ = {
  223. 'Up': goog.events.KeyCodes.UP, // 38
  224. 'Down': goog.events.KeyCodes.DOWN, // 40
  225. 'Left': goog.events.KeyCodes.LEFT, // 37
  226. 'Right': goog.events.KeyCodes.RIGHT, // 39
  227. 'Enter': goog.events.KeyCodes.ENTER, // 13
  228. 'F1': goog.events.KeyCodes.F1, // 112
  229. 'F2': goog.events.KeyCodes.F2, // 113
  230. 'F3': goog.events.KeyCodes.F3, // 114
  231. 'F4': goog.events.KeyCodes.F4, // 115
  232. 'F5': goog.events.KeyCodes.F5, // 116
  233. 'F6': goog.events.KeyCodes.F6, // 117
  234. 'F7': goog.events.KeyCodes.F7, // 118
  235. 'F8': goog.events.KeyCodes.F8, // 119
  236. 'F9': goog.events.KeyCodes.F9, // 120
  237. 'F10': goog.events.KeyCodes.F10, // 121
  238. 'F11': goog.events.KeyCodes.F11, // 122
  239. 'F12': goog.events.KeyCodes.F12, // 123
  240. 'U+007F': goog.events.KeyCodes.DELETE, // 46
  241. 'Home': goog.events.KeyCodes.HOME, // 36
  242. 'End': goog.events.KeyCodes.END, // 35
  243. 'PageUp': goog.events.KeyCodes.PAGE_UP, // 33
  244. 'PageDown': goog.events.KeyCodes.PAGE_DOWN, // 34
  245. 'Insert': goog.events.KeyCodes.INSERT // 45
  246. };
  247. /**
  248. * If true, the KeyEvent fires on keydown. Otherwise, it fires on keypress.
  249. *
  250. * @type {boolean}
  251. * @private
  252. */
  253. goog.events.KeyHandler.USES_KEYDOWN_ = goog.userAgent.IE ||
  254. goog.userAgent.EDGE ||
  255. goog.userAgent.WEBKIT && goog.userAgent.isVersionOrHigher('525');
  256. /**
  257. * If true, the alt key flag is saved during the key down and reused when
  258. * handling the key press. FF on Mac does not set the alt flag in the key press
  259. * event.
  260. * @type {boolean}
  261. * @private
  262. */
  263. goog.events.KeyHandler.SAVE_ALT_FOR_KEYPRESS_ =
  264. goog.userAgent.MAC && goog.userAgent.GECKO;
  265. /**
  266. * Records the keycode for browsers that only returns the keycode for key up/
  267. * down events. For browser/key combinations that doesn't trigger a key pressed
  268. * event it also fires the patched key event.
  269. * @param {goog.events.BrowserEvent} e The key down event.
  270. * @private
  271. */
  272. goog.events.KeyHandler.prototype.handleKeyDown_ = function(e) {
  273. // Ctrl-Tab and Alt-Tab can cause the focus to be moved to another window
  274. // before we've caught a key-up event. If the last-key was one of these we
  275. // reset the state.
  276. if (goog.userAgent.WEBKIT || goog.userAgent.EDGE) {
  277. if (this.lastKey_ == goog.events.KeyCodes.CTRL && !e.ctrlKey ||
  278. this.lastKey_ == goog.events.KeyCodes.ALT && !e.altKey ||
  279. goog.userAgent.MAC && this.lastKey_ == goog.events.KeyCodes.META &&
  280. !e.metaKey) {
  281. this.resetState();
  282. }
  283. }
  284. if (this.lastKey_ == -1) {
  285. if (e.ctrlKey && e.keyCode != goog.events.KeyCodes.CTRL) {
  286. this.lastKey_ = goog.events.KeyCodes.CTRL;
  287. } else if (e.altKey && e.keyCode != goog.events.KeyCodes.ALT) {
  288. this.lastKey_ = goog.events.KeyCodes.ALT;
  289. } else if (e.metaKey && e.keyCode != goog.events.KeyCodes.META) {
  290. this.lastKey_ = goog.events.KeyCodes.META;
  291. }
  292. }
  293. if (goog.events.KeyHandler.USES_KEYDOWN_ &&
  294. !goog.events.KeyCodes.firesKeyPressEvent(
  295. e.keyCode, this.lastKey_, e.shiftKey, e.ctrlKey, e.altKey,
  296. e.metaKey)) {
  297. this.handleEvent(e);
  298. } else {
  299. this.keyCode_ = goog.events.KeyCodes.normalizeKeyCode(e.keyCode);
  300. if (goog.events.KeyHandler.SAVE_ALT_FOR_KEYPRESS_) {
  301. this.altKey_ = e.altKey;
  302. }
  303. }
  304. };
  305. /**
  306. * Resets the stored previous values. Needed to be called for webkit which will
  307. * not generate a key up for meta key operations. This should only be called
  308. * when having finished with repeat key possibilities.
  309. */
  310. goog.events.KeyHandler.prototype.resetState = function() {
  311. this.lastKey_ = -1;
  312. this.keyCode_ = -1;
  313. };
  314. /**
  315. * Clears the stored previous key value, resetting the key repeat status. Uses
  316. * -1 because the Safari 3 Windows beta reports 0 for certain keys (like Home
  317. * and End.)
  318. * @param {goog.events.BrowserEvent} e The keyup event.
  319. * @private
  320. */
  321. goog.events.KeyHandler.prototype.handleKeyup_ = function(e) {
  322. this.resetState();
  323. this.altKey_ = e.altKey;
  324. };
  325. /**
  326. * Handles the events on the element.
  327. * @param {goog.events.BrowserEvent} e The keyboard event sent from the
  328. * browser.
  329. */
  330. goog.events.KeyHandler.prototype.handleEvent = function(e) {
  331. var be = e.getBrowserEvent();
  332. var keyCode, charCode;
  333. var altKey = be.altKey;
  334. // IE reports the character code in the keyCode field for keypress events.
  335. // There are two exceptions however, Enter and Escape.
  336. if (goog.userAgent.IE && e.type == goog.events.EventType.KEYPRESS) {
  337. keyCode = this.keyCode_;
  338. charCode = keyCode != goog.events.KeyCodes.ENTER &&
  339. keyCode != goog.events.KeyCodes.ESC ?
  340. be.keyCode :
  341. 0;
  342. // Safari reports the character code in the keyCode field for keypress
  343. // events but also has a charCode field.
  344. } else if (
  345. (goog.userAgent.WEBKIT || goog.userAgent.EDGE) &&
  346. e.type == goog.events.EventType.KEYPRESS) {
  347. keyCode = this.keyCode_;
  348. charCode = be.charCode >= 0 && be.charCode < 63232 &&
  349. goog.events.KeyCodes.isCharacterKey(keyCode) ?
  350. be.charCode :
  351. 0;
  352. // Opera reports the keycode or the character code in the keyCode field.
  353. } else if (goog.userAgent.OPERA && !goog.userAgent.WEBKIT) {
  354. keyCode = this.keyCode_;
  355. charCode = goog.events.KeyCodes.isCharacterKey(keyCode) ? be.keyCode : 0;
  356. // Mozilla reports the character code in the charCode field.
  357. } else {
  358. keyCode = be.keyCode || this.keyCode_;
  359. charCode = be.charCode || 0;
  360. if (goog.events.KeyHandler.SAVE_ALT_FOR_KEYPRESS_) {
  361. altKey = this.altKey_;
  362. }
  363. // On the Mac, shift-/ triggers a question mark char code and no key code
  364. // (normalized to WIN_KEY), so we synthesize the latter.
  365. if (goog.userAgent.MAC && charCode == goog.events.KeyCodes.QUESTION_MARK &&
  366. keyCode == goog.events.KeyCodes.WIN_KEY) {
  367. keyCode = goog.events.KeyCodes.SLASH;
  368. }
  369. }
  370. keyCode = goog.events.KeyCodes.normalizeKeyCode(keyCode);
  371. var key = keyCode;
  372. // Correct the key value for certain browser-specific quirks.
  373. if (keyCode) {
  374. if (keyCode >= 63232 && keyCode in goog.events.KeyHandler.safariKey_) {
  375. // NOTE(nicksantos): Safari 3 has fixed this problem,
  376. // this is only needed for Safari 2.
  377. key = goog.events.KeyHandler.safariKey_[keyCode];
  378. } else {
  379. // Safari returns 25 for Shift+Tab instead of 9.
  380. if (keyCode == 25 && e.shiftKey) {
  381. key = 9;
  382. }
  383. }
  384. } else if (
  385. be.keyIdentifier &&
  386. be.keyIdentifier in goog.events.KeyHandler.keyIdentifier_) {
  387. // This is needed for Safari Windows because it currently doesn't give a
  388. // keyCode/which for non printable keys.
  389. key = goog.events.KeyHandler.keyIdentifier_[be.keyIdentifier];
  390. }
  391. // If we get the same keycode as a keydown/keypress without having seen a
  392. // keyup event, then this event was caused by key repeat.
  393. var repeat = key == this.lastKey_;
  394. this.lastKey_ = key;
  395. var event = new goog.events.KeyEvent(key, charCode, repeat, be);
  396. event.altKey = altKey;
  397. this.dispatchEvent(event);
  398. };
  399. /**
  400. * Returns the element listened on for the real keyboard events.
  401. * @return {Element|Document|null} The element listened on for the real
  402. * keyboard events.
  403. */
  404. goog.events.KeyHandler.prototype.getElement = function() {
  405. return this.element_;
  406. };
  407. /**
  408. * Adds the proper key event listeners to the element.
  409. * @param {Element|Document} element The element to listen on.
  410. * @param {boolean=} opt_capture Whether to listen for browser events in
  411. * capture phase (defaults to false).
  412. */
  413. goog.events.KeyHandler.prototype.attach = function(element, opt_capture) {
  414. if (this.keyUpKey_) {
  415. this.detach();
  416. }
  417. this.element_ = element;
  418. this.keyPressKey_ = goog.events.listen(
  419. this.element_, goog.events.EventType.KEYPRESS, this, opt_capture);
  420. // Most browsers (Safari 2 being the notable exception) doesn't include the
  421. // keyCode in keypress events (IE has the char code in the keyCode field and
  422. // Mozilla only included the keyCode if there's no charCode). Thus we have to
  423. // listen for keydown to capture the keycode.
  424. this.keyDownKey_ = goog.events.listen(
  425. this.element_, goog.events.EventType.KEYDOWN, this.handleKeyDown_,
  426. opt_capture, this);
  427. this.keyUpKey_ = goog.events.listen(
  428. this.element_, goog.events.EventType.KEYUP, this.handleKeyup_,
  429. opt_capture, this);
  430. };
  431. /**
  432. * Removes the listeners that may exist.
  433. */
  434. goog.events.KeyHandler.prototype.detach = function() {
  435. if (this.keyPressKey_) {
  436. goog.events.unlistenByKey(this.keyPressKey_);
  437. goog.events.unlistenByKey(this.keyDownKey_);
  438. goog.events.unlistenByKey(this.keyUpKey_);
  439. this.keyPressKey_ = null;
  440. this.keyDownKey_ = null;
  441. this.keyUpKey_ = null;
  442. }
  443. this.element_ = null;
  444. this.lastKey_ = -1;
  445. this.keyCode_ = -1;
  446. };
  447. /** @override */
  448. goog.events.KeyHandler.prototype.disposeInternal = function() {
  449. goog.events.KeyHandler.superClass_.disposeInternal.call(this);
  450. this.detach();
  451. };
  452. /**
  453. * This class is used for the goog.events.KeyHandler.EventType.KEY event and
  454. * it overrides the key code with the fixed key code.
  455. * @param {number} keyCode The adjusted key code.
  456. * @param {number} charCode The unicode character code.
  457. * @param {boolean} repeat Whether this event was generated by keyboard repeat.
  458. * @param {Event} browserEvent Browser event object.
  459. * @constructor
  460. * @extends {goog.events.BrowserEvent}
  461. * @final
  462. */
  463. goog.events.KeyEvent = function(keyCode, charCode, repeat, browserEvent) {
  464. goog.events.BrowserEvent.call(this, browserEvent);
  465. this.type = goog.events.KeyHandler.EventType.KEY;
  466. /**
  467. * Keycode of key press.
  468. * @type {number}
  469. */
  470. this.keyCode = keyCode;
  471. /**
  472. * Unicode character code.
  473. * @type {number}
  474. */
  475. this.charCode = charCode;
  476. /**
  477. * True if this event was generated by keyboard auto-repeat (i.e., the user is
  478. * holding the key down.)
  479. * @type {boolean}
  480. */
  481. this.repeat = repeat;
  482. };
  483. goog.inherits(goog.events.KeyEvent, goog.events.BrowserEvent);