<style type="text/css">
#type{
	background: #eef;
	border: 2px inset #999;
	overflow: auto;
	padding: 30px;
	margin: 30px;
	width: 200px;
}
</style>

<div id="type">
<b>Click and type to edit</b> the &lt;div&gt;. Press TAB or click "out" to test the focus.
<i>The objective of this example isn't to edit, but test the "focus" and "key" events.</i>
</div>

<script type="text/javascript">
//<![CDATA[

var t = document.getElementById("type");
focuser(t);
t.onfocus = function(){
	this.style.background = "#fee";
};
t.onblur = function(){
	this.style.background = "#eef";
};
t.onkeypress = function(k){
	var s = this.innerHTML;
	this.innerHTML = k == 8 ? s.slice(0, -1) : s + String.fromCharCode(k);
};

//]]>
</script>