| <!DOCTYPE html> |
| <html> |
| <!-- |
| Copyright 2010 The Closure Library Authors. All Rights Reserved. |
| |
| Use of this source code is governed by the Apache License, Version 2.0. |
| See the COPYING file for details. |
| --> |
| <head> |
| <title>goog.events.KeyHandler</title> |
| <link rel="stylesheet" href="css/demo.css"> |
| <style> |
| |
| .input-group { |
| border: 1px solid black; |
| clear: both; |
| float: left; |
| margin-bottom: 1em; |
| padding: 1em; |
| } |
| |
| #console { |
| position: fixed; |
| right: 0; |
| top: 0; |
| left: 400px; |
| bottom: 0; |
| overflow: auto; |
| } |
| |
| #no-tab { |
| background: pink; |
| } |
| |
| </style> |
| <script src="../base.js"></script> |
| <script> |
| goog.require('goog.debug.DivConsole'); |
| goog.require('goog.events'); |
| goog.require('goog.events.KeyCodes'); |
| goog.require('goog.events.KeyHandler'); |
| goog.require('goog.log'); |
| </script> |
| </head> |
| <body> |
| <h1>goog.events.KeyHandler</h1> |
| <p><button onclick="divConsole.clear()">Clear Console</button></p> |
| |
| <div class="input-group"> |
| <label>Plain input <input></label><br> |
| <label>Number input <input class="number-input"></label><br> |
| <label>Text area <textarea></textarea></label><br> |
| <div tabIndex="0">Focusable div</div> |
| </div> |
| |
| <div id="no-tab" class="input-group"> |
| No Tab inside this<br><br> |
| |
| <label>Plain input <input></label><br> |
| <label>Number input <input class="number-input"></label><br> |
| <label>Text area <textarea></textarea></label><br> |
| <div tabIndex="0">Focusable div</div> |
| </div> |
| |
| <div id="console"></div> |
| |
| <script> |
| |
| var divConsole = new goog.debug.DivConsole(document.getElementById('console')); |
| divConsole.setCapturing(true); |
| var logger = new goog.log.getLogger('demo'); |
| |
| var docKh = new goog.events.KeyHandler(document); |
| goog.events.listen(docKh, 'key', function(e) { |
| goog.log.info(logger, 'keyCode: ' + e.keyCode + |
| ', charCode: ' + e.charCode + |
| ', repeat: ' + e.repeat + |
| ', target: ' + e.target + |
| ', native event: ' + e.getBrowserEvent().type); |
| }); |
| |
| var noTabKh = new goog.events.KeyHandler(document.getElementById('no-tab')); |
| goog.events.listen(noTabKh, goog.events.KeyHandler.EventType.KEY, function(e) { |
| if (e.keyCode == goog.events.KeyCodes.TAB) { |
| e.preventDefault(); |
| } |
| }); |
| |
| function numberInputKeyHandler(e) { |
| goog.log.info(logger, 'isTextModifyingKeyEvent: ' + |
| goog.events.KeyCodes.isTextModifyingKeyEvent(e)); |
| if (e.target.className != 'number-input' || |
| e.ctrlKey || |
| !e.shiftKey && e.keyCode >= goog.events.KeyCodes.ZERO && |
| e.keyCode <= goog.events.KeyCodes.NINE || |
| !goog.events.KeyCodes.isTextModifyingKeyEvent(e)) { |
| return; |
| } |
| |
| switch (e.keyCode) { |
| // Allow these |
| case goog.events.KeyCodes.DELETE: |
| case goog.events.KeyCodes.BACKSPACE: |
| case goog.events.KeyCodes.TAB: |
| return; |
| } |
| |
| // prevent default for the rest |
| e.preventDefault(); |
| } |
| |
| goog.events.listen(docKh, goog.events.KeyHandler.EventType.KEY, |
| numberInputKeyHandler); |
| |
| </script> |
| |
| </body> |
| </html> |
