106 lines
2.4 KiB
HTML
106 lines
2.4 KiB
HTML
|
<!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>
|