experiments/cut_copy.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>