browserTest.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Browser Test</title>
	<script type="text/javascript" src="jquery-1.6.2.js"></script>
</head>
<body>
	<input type="text" value="left" />
	<input id="test" type="text" value="hello" maxlength="20" />
	<input type="text" value="right" /><br />
	<input type="checkbox" id="simulateKeypress" />Simulate Keypress<br />
	<textarea id="log" cols="50" rows="20"></textarea><br />
	<input type="button" value="Clear" onclick="$('#log').val('')" />
	<script type="text/javascript" language="javascript">
		$(document).ready(function ()
		{
			function insertAt(s, index, value)
			{
				return s.slice(0, index) + value + s.slice(index);
			}

			function getSelection(element)
			{
				var selection = {};
				if(element.setSelectionRange)
				{
					selection.start = element.selectionStart;
					selection.length = element.selectionEnd - selection.start;
				}
				else if(document.selection && document.selection.createRange)
				{
					var range = document.selection.createRange();
					selection.start = 0 - range.duplicate().moveStart('character', -100000);
					selection.length = range.text.length;
				}
				return selection;
			}

			var test = $("#test");
			var logArea = $("#log");
			function log(message)
			{
				var selection = getSelection(test[0]);
				var value = test.val();
				var selectionEnd = selection.start + selection.length;
				if(selectionEnd != selection.start)
					value = insertAt(value, selectionEnd, "^");

				value = insertAt(value, selection.start, "^");

				logArea.val(message + "\t\t\"" + value + "\"\n" + logArea.val());
			}

			test
			.blur(function (e)
			{
				log("blur");
			})
			.focus(function (e)
			{
				log("focus");
			})
			.focusin(function (e)
			{
				log("focusin");
			})
			.focusout(function (e)
			{
				log("focusout");
			})
			.change(function (e)
			{
				log("change");
			})
			.keydown(function (e)
			{
				log("keydown: " + e.which);
			})
			.keypress(function (e)
			{
				log("keypress: '" + String.fromCharCode(e.which) + "' (" + e.which + ")");
				if($("#simulateKeypress").is(':checked'))
				{
					if(e.ctrlKey || e.altKey || e.metaKey || e.which < 32)
						return true;

					if((32 <= e.which && e.which <= 126) || e.which >= 128)
						test.val(test.val() + String.fromCharCode(e.which));
					return false;
				}
			})
			.keyup(function (e)
			{
				log("keyup: " + e.which);
			})
			.bind("cut", function (e)
			{
				log("cut");
			})
			.bind("paste", function (e)
			{
				log("paste");
			})
			.bind("input", function (e)
			{
				log("input");
			})
			.bind("click", function (e)
			{
				log("click");
			})
			.bind("select", function (e)
			{
				log("select");
			});
		});
	</script>
</body>
</html>