| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105 |
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
- "http://www.w3.org/TR/html4/strict.dtd">
- <html lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>Text Events</title>
- <meta name="author" content="Fabian Jakobs">
-
- <style type="text/css" media="screen">
-
- #container {
- border: 1px solid black;
- width: 600px;
- }
-
- #canvas {
- border: 1px solid black;
- margin: 4px;
- width: 590px;
- height: 400px;
- }
- </style>
-
- </head>
- <body>
-
- <div id="container">
- <textarea id="text"></textarea>
- <div id="canvas"></div>
- </div>
- <input type="button" value="Clear" id="some_name" onclick="document.getElementById('logger').innerHTML = ''">
- <div id="logger">
-
- </div>
-
- <script type="text/javascript" charset="utf-8">
-
- if (!window.console) window.console = {};
- if (!console.log) {
- var logger = document.getElementById("logger");
- console.log = function() {
- logger.innerHTML += Array.prototype.join.call(arguments, ", ") + "<br>";
- }
- }
- function addListener(elem, type, callback) {
- if (elem.addEventListener) {
- return elem.addEventListener(type, callback, false);
- }
- if (elem.attachEvent) {
- elem.attachEvent("on" + type, function() {
- callback(window.event);
- });
- }
- }
-
- var container = document.getElementById("container");
- var canvas = document.getElementById("canvas");
- var text = document.getElementById("text");
-
- function log(e) {
- console.log(e.type, e);
- }
- function logKey(e) {
- console.log(e.type, e.charCode, e.keyCode, e);
- }
- addListener(text, "keydown", logKey, false);
- addListener(text, "keyup", logKey, false);
- addListener(text, "keypress", logKey, false);
- addListener(text, "textInput", function(e) {
- console.log(e.type, e.data, e);
- }, false);
- function fillSelection() {
- text.value = "Juhu Kinners";
- text.select();
- }
- addListener(text, "copy", fillSelection, false);
- addListener(text, "paste", log, false);
- addListener(text, "cut", fillSelection, false);
- addListener(text, "beforecopy", log, false);
- addListener(text, "beforepaste", log, false);
- addListener(text, "beforecut", log, false);
- addListener(text, "compositionstart", log, false);
- addListener(text, "compositionupdate", log, false);
- addListener(text, "compositionend", log, false);
- addListener(text, "propertychange", function(e) {
- console.log(e.type, e.propertyName, e);
- }, false);
-
- </script>
- </body>
- </html>
|