Как отменить эффекты кнопки Escape на ввод HTML?

Question

Я создаю игру на JavaScript, в которой воспроизводится звук, и на основе звука вы должны ввести текст в большое текстовое поле.JavaScript используется для оценки вашего ответа, а затем очистки текстового поля для подготовки к следующему аудиоклипу.

Проблема: В некоторых случаях при нажатии клавиши esc (escape), когда фокусв пустом <input type="text" /> текстовое поле заполняется каким-то старым текстом.

Я использую MooTools и пытался использовать event.stop () (который останавливает распространение и также выполняет предотвращение появления ошибок) внутри нажатия клавиш, keydown и keyup без удачи.

Как я могу запретить кнопке [esc] изменять значение в текстовом поле?

(Это важно, потому что я использую клавишу [esc] каксочетание клавиш для воспроизведения звука)

Answer 1

Я смог это исправить, просто позвонив blur() и затем focus() в поле ввода. Это, по крайней мере, прояснило мне проблему в Firefox.

Answer 2

Интересная проблема - это происходит, например, в IE, но не в Chrome. Вот решение, которое я протестировал в Chrome и IE (похоже, работает).

Расширенная версия:

Скрипт в заголовке страницы:

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

Где 'testinput' - это вход, на котором мы отключаем escape. Тестовый ввод HTML ниже:

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

Обратите внимание, что использовались как 'onkeyup', так и 'onkeypress' - технически требуется только 'onkeyup', хотя использование 'onkeypress' предотвращает мгновенное исчезновение текстового поля, пока нажата клавиша выхода.

Сводка вручную + предотвращение ошибок + поддержка нескольких входов (если вы предпочитаете)

Скрипт в шапке:

<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 (хотя идентификатор больше не нужен):

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

Оба метода сохраняют копию того, что текстовые вводы содержали до нажатия следующей клавиши, если нажатой клавишей было 'escape', Unicode 27, тогда предыдущая текстовая запись была помещена обратно в текстовое поле (это дискриминация, поэтому скрипт не добавляет слишком большую нагрузку на браузер при каждом нажатии клавиши).

Во второй версии допускается несколько текстовых вводов на одной и той же странице с отключенной клавишей Escape - при условии, что для них установлен атрибут onFocus, как указано выше (несколько элементов не будут мешать друг другу). Он также проверяет объекты, которые передаются ему, определены, чтобы предотвратить случайную неправильную реализацию, вызывающую IE сердечный приступ!

Надеюсь, это поможет.

Answer 3

Когда обнаружен побег, сделайте то, что нужно сделать, и в конце return false;

Это решило проблему в Firefox 25 для меня.