I'm trapping the onKeyPress event of a textarea, and I'm wondering if there's a way to prevent the key from also being typed into the textarea if it's a certain key. I have tried stripping off the last character from the value property, but it seems that the character is added after the event handler finishes.

Here's my code, in case it helps:

<html>
	<head>
		<script language="javascript" type="text/javascript">
			function typed(e)
			{
				var key = String.fromCharCode(e.charCode);
				if(key == "x" || key == "X")
				{
					var value = document.getElementById("notepad").value;
					if(value.length > 0)
					{
						switch(value[value.length - 1])
						{
							case "C":
								var result = "\u0108";
								break;
							case "c":
								var result = "\u0109";
								break;
							case "G":
								var result = "\u011C";
								break;
							case "g":
								var result = "\u011D";
								break;
							case "H":
								var result = "\u0124";
								break;
							case "h":
								var result = "\u0125";
								break;
							case "J":
								var result = "\u0134";
								break;
							case "j":
								var result = "\u0135";
								break;
							case "S":
								var result = "\u015C";
								break;
							case "s":
								var result = "\u015D";
								break;
							case "U":
								var result = "\u016C";
								break;
							case "u":
								var result = "\u016D";
								break;
							default:
								var result = value[value.length - 1] + "x";
						}
						document.getElementById("notepad").value = value.substr(0, value.length-2) + result;
					}
				}
			}
		</script>
	</head>
	<body>
		<textarea id="notepad" rows="25" cols="80" onkeypress="javascript: typed(event);"></textarea>
	</body>
</html>

Explanation:
Essentially, I want it so that when I type cx, gx, etc... they get coflated into one of the special characters. But if I type ax, or something that has no special character equivalent, it'll stay the way it should be. Right now it's pretty much working fine except that the x gets tagged onto the end there.

Try just returning false from the function. Also, in your onkeypress attribute you don't need "javascript:" it knows what you're trying to do if you just put typed(event);

OK fixed. Here's what I have now:

<html>
	<head>
		<script language="javascript" type="text/javascript">
			function typed(e)
			{
				var key = String.fromCharCode(e.charCode);
				if(key == "x" || key == "X")
				{
					var value = document.getElementById("notepad").value;
					if(value.length > 0)
					{
						switch(value[value.length - 1])
						{
							case "C":
								var result = "\u0108";
								break;
							case "c":
								var result = "\u0109";
								break;
							case "G":
								var result = "\u011C";
								break;
							case "g":
								var result = "\u011D";
								break;
							case "H":
								var result = "\u0124";
								break;
							case "h":
								var result = "\u0125";
								break;
							case "J":
								var result = "\u0134";
								break;
							case "j":
								var result = "\u0135";
								break;
							case "S":
								var result = "\u015C";
								break;
							case "s":
								var result = "\u015D";
								break;
							case "U":
								var result = "\u016C";
								break;
							case "u":
								var result = "\u016D";
								break;
							default:
								var result = value[value.length - 1] + "x";
						}
						document.getElementById("notepad").value = value.substr(0, value.length-1) + result;
						return false;					
					}
				}
			}
		</script>
	</head>
	<body>
		<textarea id="notepad" rows="25" cols="80" onkeypress="return typed(event);"></textarea>
	</body>
</html>
This question has already been answered. Start a new discussion instead.