diff options
Diffstat (limited to 'webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/Keyhandler_1.html')
-rw-r--r-- | webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/Keyhandler_1.html | 117 |
1 files changed, 117 insertions, 0 deletions
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/Keyhandler_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/Keyhandler_1.html new file mode 100644 index 0000000000..bfd2ec6b15 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/Keyhandler_1.html @@ -0,0 +1,117 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> + + <style type="text/css"> + #keylogger { + position: absolute; + width: 500px; + height: 500px; + left: 30px; + top: 40px; + color: black; + background-color: #EEE; + padding: 5px; + border: 1px inset; + overflow: scroll; + /* display:none; */ + } + + table { + width: 100%; + } + + td { + text-align: center; + } + </style> + +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="demoDescription"> + <p>Keyhandler Test</p> + <p>Displays qoooxdoo's normalized key events.</p> + </div> + + + <div id="keylogger"> + </div> + + <script type="text/javascript"> + + qx.core.Init.getInstance().defineMain(function() + { + var tableHead = "<table><tr><th>Event</th><th>key identifier</th><th>key code</th><th>char code</th><th>Shift</th><th>Ctrl</th><th>Alt</th></tr>"; + var keyEvents = []; + var maxLogSize = 50; + var logDiv = document.getElementById("keylogger"); + + function initializeLogger() { + logDiv.innerHTML = tableHead + "</table>"; + keyEvents = []; + } + + function logKeyEvent(keyEvent) { + var eventCopy = { + type: keyEvent.getType(), + iden: keyEvent.getKeyIdentifier(), + keyCode: keyEvent.getKeyCode(), + charCode: keyEvent.getCharCode(), + shift: keyEvent.getDomEvent().shiftKey, + alt: keyEvent.getDomEvent().altKey, + ctrl: keyEvent.getDomEvent().ctrlKey + } + keyEvents.unshift(eventCopy); + keyEvents = keyEvents.slice(0, maxLogSize); + str = [tableHead]; + for (var i=0; i<keyEvents.length; i++) { + var e = keyEvents[i]; + str.push("<tr><td>"); + str.push(e.type); + str.push("</td><td>"); + str.push(e.iden); + str.push("</td><td>"); + str.push(e.keyCode); + str.push("</td><td>"); + str.push(e.charCode); + str.push("</td><td>"); + str.push(e.shift); + str.push("</td><td>"); + str.push(e.ctrl); + str.push("</td><td>"); + str.push(e.alt); + str.push("</td></tr>"); + } + str.push("</table>"); + logDiv.innerHTML = str.join(""); + logDiv.scrollTop = 0; + } + + initializeLogger(); + + var d = qx.ui.core.ClientDocument.getInstance(); + d.addEventListener("keydown", logKeyEvent); + d.addEventListener("keypress", logKeyEvent); + d.addEventListener("keyinput", logKeyEvent); + d.addEventListener("keyup", logKeyEvent); + + var button = new qx.ui.form.Button("clear"); + button.set({ + left: 550, + top: 40 + }); + button.addEventListener("execute", initializeLogger); + button.addToDocument(); + + }); + </script> +</body> +</html> |