¿Cómo cancelar los efectos del botón Escape en una entrada html?

Question

Estoy construyendo un juego de JavaScript donde se reproduce el audio y, basado en el audio, se supone que debes escribir texto en un cuadro de texto grande. JavaScript se utiliza para calificar su respuesta y luego borrar el cuadro de texto para prepararse para el siguiente clip de audio.

El problema: En algunos casos, al pulsar la tecla esc (escape), mientras que se centró dentro de un vacío <input type="text" />, el cuadro de texto se rellena con algún texto antiguo.

Estoy usando MooTools y he intentado usar event.stop() (que deja de propagar y también ejecuta preventDefault) dentro de la pulsación de teclas, la tecla de acceso y la tecla sin suerte.

¿Cómo puedo evitar que el botón [esc] cambie el valor dentro de un cuadro de texto?

(Esto es importante porque estoy usando la tecla [ESC] como un atajo de teclado para reproducir el audio)

Answer 1

que era capaz de solucionar este con sólo llamar blur() y luego focus() en el cuadro de entrada. Eso alivia el problema en Firefox para mí al menos.

Answer 2

Problema interesante - sucede en el IE, por ejemplo, pero no cromo. Aquí hay una solución que probé en Chrome e IE (parece funcionar).

versión ampliada:

script en el encabezado de la página:

<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> 

Dónde testinput 'es la entrada estamos deshabilitando al salir. El html testinput es el siguiente:

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

Aviso tanto 'onkeyup' y 'onkeypress' se utilizaron - técnico solamente 'onkeyup' se necesita, aunque el uso de 'onkeypress' impide que el cuadro de texto que va en blanco momentáneamente mientras la tecla de escape es Deprimido.

entradas minified manualmente + prevención de errores + múltiples compatibles (si lo prefiere)

script en el encabezado:

<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> 

etiqueta testinput html (aunque un id ya no es necesario):

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

Ambos métodos guardan una copia de lo que las entradas de texto contenían antes de pulsar la tecla siguiente, si la tecla presse d era 'escape', unicode 27, luego la entrada de texto anterior se volvió a poner en el cuadro de texto (esto es discriminatorio por lo que el script no agrega demasiada carga al navegador cada vez que se presiona una tecla).

La segunda versión permite que múltiples entradas de texto en la misma página tengan la clave de escape desactivada, siempre y cuando tengan el atributo onFocus configurado como se indicó anteriormente (los múltiples elementos no interferirán entre sí). También verifica que los objetos que se pasan a él estén definidos, para evitar una mala implementación accidental, ¡lo que provoca un ataque al corazón por parte de IE!

Espero que esto ayude.

Answer 3

cuando el escape detectado hacer lo que se necesita hacer y al final return false;

Se resolvió el problema en Firefox 25 para mí.