Howto cancel the effects of the Escape button on an html input?

Question

I'm building a JavaScript game where audio plays and based on the audio you're supposed to type some text into a big textbox. JavaScript is used to score your answer and then clear the textbox to prepare for the next audio clip.

The problem: In some cases when pressing the esc (escape) key while focused within an empty <input type="text" />, the textbox gets populated with some old text.

I'm using MooTools and have tried using event.stop() (which stops propagating and also executes preventDefault) within keypress, keydown, and keyup with no luck.

How can I prevent the [esc] button from changing the value within a textbox?

(This is important because I'm using the [esc] key as a keyboard shortcut to replay the audio)

Answer 1

I was able to fix this by just calling blur() and then focus() on the input box. That cleared the problem in Firefox for me at least.

Answer 2

Interesting problem - it happens in IE for example but not Chrome. Here is a solution I have tested in Chrome and IE (it seems to work).

Expanded version:

Script in page header:

<script>
var buff; //Must have global scope
var input = document.getElementById("testinput"); //Defined here to save cpu (instead of on every key press).
function CheckPreBuff(e)
{
  var ev = window.event ? event : e; //Get the event object for IE or FF

  var unicode = (typeof(ev.keyCode) != "undefined")? ev.keyCode : ev.charCode;
  if(unicode != 27) buff = input.value; //The 'escape' key has a unicode value of 27
  else input.value = buff; //Only set the input contents when needed, so not to waste cpu.
}
</script>

Where 'testinput' is the input we are disabling escape on. The testinput html is below:

<input id="testinput" onkeypress="CheckPreBuff();" onkeyup="CheckPreBuff();" type="text"/>

Notice both 'onkeyup' and 'onkeypress' were used - technically only 'onkeyup' is needed, although using 'onkeypress' prevents the text box going blank momentarily whilst the escape key is depressed.

Manually minified + error prevention + multiple inputs supported (if you prefer)

Script in header:

<script>
var buff = [];
function InitCPB(obj){if(typeof(obj)=="undefined")return;buff[0]=obj;buff[1]="";obj.onkeypress=CPB;obj.onkeyup=CPB;}
function CPB(e){if(typeof((buff[0]))=="undefined")return;var ev=window.event?event:e;(((typeof(ev.keyCode)!="undefined")?ev.keyCode:ev.charCode)!=27)?buff[1]=(buff[0]).value:(buff[0]).value=buff[1];}
</script>

testinput html tag (although an id is no longer needed):

<input onfocus="InitCPB(this);" type="text"/>

Both methods keep a copy of what the text inputs contained before the next key was pressed, if the key pressed was 'escape', unicode 27, then the previous text entry was put back into the text box (this is discriminatory so the script does not add too much load to the browser on every key press).

The second version allows for multiple text inputs on the same page having the escape key disabled - just so long as they have the onFocus attribute set as above (the multiple elements will not interfere with each other). It also checks the objects being passes to it are defined, to prevent accidental mis-implementation giving IE a heart attack!

I hope this helps.