ace-code-editor
Version:
Ajax.org Code Editor is a full featured source code highlighting editor that powers the Cloud9 IDE
106 lines (80 loc) • 2.51 kB
HTML
<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>