bryanforbes/keyboard-events.html

## keyboard-events.html
<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Test</title>
</head>
<body>
	<input id="txt" type="text">
	<script>
		var attach;
		if(document.addEventListener){
			attach = function(node, event, func){
				node.addEventListener(event, func, false);
			};
		}else{
			attach = function(node, event, func){
				event = "on"+event;
				node.attachEvent(event, func);
			};
		}

		function logKey(type, evt){
			var str = type + ": \n\tkeyCode: " + evt.keyCode + "\n\tcharCode: " + evt.charCode;
			if(typeof evt.keyIdentifier != "undefined"){
				str += "\n\tkeyIdentifier: " + evt.keyIdentifier + "\n\tkeyLocation: " + evt.keyLocation;
			}
			console.log(str);
		}

		var txt = document.getElementById("txt");

		attach(txt, "keydown", function(evt){
			logKey("keydown", evt);
		});
		attach(txt, "keyup", function(evt){
			logKey("keyup", evt);
		});
		attach(txt, "keypress", function(evt){
			logKey("keypress", evt);
		});
		attach(txt, "input", function(evt){
			console.log("input", evt);
		});
		attach(txt, "textInput", function(evt){
			console.log("textInput", evt, evt.data, evt.data.charCodeAt(0));
		});
		attach(txt, "compositionstart", function(evt){
			console.log("compositionstart", evt);
		});
		attach(txt, "compositionend", function(evt){
			console.log("compositionend", evt);
		});
		attach(txt, "change", function(evt){
			console.log("change", evt);
		});

		txt.focus();
	</script>
</body>
</html>
	<!DOCTYPE HTML>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Test</title>
	</head>
	<body>
	<input id="txt" type="text">
	<script>
	var attach;
	if(document.addEventListener){
	attach = function(node, event, func){
	node.addEventListener(event, func, false);
	};
	}else{
	attach = function(node, event, func){
	event = "on"+event;
	node.attachEvent(event, func);
	};
	}

	function logKey(type, evt){
	var str = type + ": \n\tkeyCode: " + evt.keyCode + "\n\tcharCode: " + evt.charCode;
	if(typeof evt.keyIdentifier != "undefined"){
	str += "\n\tkeyIdentifier: " + evt.keyIdentifier + "\n\tkeyLocation: " + evt.keyLocation;
	}
	console.log(str);
	}

	var txt = document.getElementById("txt");

	attach(txt, "keydown", function(evt){
	logKey("keydown", evt);
	});
	attach(txt, "keyup", function(evt){
	logKey("keyup", evt);
	});
	attach(txt, "keypress", function(evt){
	logKey("keypress", evt);
	});
	attach(txt, "input", function(evt){
	console.log("input", evt);
	});
	attach(txt, "textInput", function(evt){
	console.log("textInput", evt, evt.data, evt.data.charCodeAt(0));
	});
	attach(txt, "compositionstart", function(evt){
	console.log("compositionstart", evt);
	});
	attach(txt, "compositionend", function(evt){
	console.log("compositionend", evt);
	});
	attach(txt, "change", function(evt){
	console.log("change", evt);
	});

	txt.focus();
	</script>
	</body>
	</html>