keyhandler.html | Explore in Territory

<!DOCTYPE html>
<html>
<!--
Copyright 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>
chromium/third_party/google-closure-library/closure/goog/demos/keyhandler.html
