sku-pg

Version:
Skulpt is a Javascript implementation of Python 2.x. Python that runs in your browser!
www.skulpt.org
128 lines (98 loc) • 2.61 kB
HTML
<!DOCTYPE html>
<html>
<!--
Copyright 2010 The Closure Library Authors. All Rights Reserved.

Use of this source code is governed by an Apache 2.0 License.
See the COPYING file for details.
-->
<head>
<title>goog.events.KeyHandler</title>
<link rel="stylesheet" href="css/demo.css">
<style>

body {
  font: message-box;
}

button {
  font: caption;
}

#console {
  position: fixed;
  right: 0;
  top: 0;
  left: 400px;
  bottom: 0;
  overflow: auto;
}

#no-tab {
  border: 1px solid red;
  background: pink;
  float: left;
  padding: 1em;
}


</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');

</script>
</head>
<body>
<h1>goog.events.KeyHandler</h1>
<p><button onclick="console.clear()">Clear Console</button>

<p>
  <label>Plain input <input></label><br>
  <label>Number input <input class=number-input></label><br>
  <textarea></textarea>
</p>


<div id=no-tab>
  <p>No Tab inside this

  <p><label>Plain input <input></label><br>
  <label>Number input <input class=number-input></label><br>
  <textarea></textarea>

</div>



<div id=console></div>

<script>

var console = new goog.debug.DivConsole(document.getElementById('console'));
console.setCapturing(true);
var logger = new goog.debug.Logger.getLogger('demo');

var docKh = new goog.events.KeyHandler(document);
goog.events.listen(docKh, 'key', function(e) {
  logger.info('keyCode: ' + e.keyCode +
              ', charCode: ' + e.charCode +
              ', repeat: ' + e.repeat +
              ', target: ' + e.target);
});

var noTabKh =
    new goog.events.KeyHandler(document.getElementById('no-tab'));
goog.events.listen(noTabKh, 'key', function(e) {
  if (e.keyCode == goog.events.KeyCodes.TAB) {
    e.preventDefault();
  }
});

function numberInputKeyHandler(e) {
  logger.info('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 ||
      e.keyCode == goog.events.KeyCodes.TAB ||
      !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, 'key', numberInputKeyHandler);


</script>

</body>
</html>