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

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

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

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

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

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

7
html input javascript

3 ответов

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

4

интересная проблема-это происходит в 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 testinput ниже:

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

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

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

скрипт в заголовке:

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

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

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

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

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

2

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

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

0