javascript - Howto cancel the effects of the Escape button on an html input? - Stack Overflow

admin管理员组

文章数量:1292114

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)

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)

• javascript
• html
• input

Share Follow asked Jul 7, 2011 at 2:02 philfreophilfreo 43.9k2727 gold badges130130 silver badges141141 bronze badges 3

• It seems the problem is elsewhere. Cancelling esc may not help. – Mrchief Commented Jul 7, 2011 at 2:13
• Note: I noticed this problem in Firefox 5 – philfreo Commented Jul 8, 2011 at 6:51
• See this answer. Adding keydown handler which prevents default action solves this problem in a better way. – Chen Commented Jan 6, 2014 at 0:53

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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.

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.

When escape detected do what is needed to be done and at the end return false;

It solved the problem in firefox 25 for me.

本文标签： javascriptHowto cancel the effects of the Escape button on an html inputStack Overflow