Получить .val() при нажатии клавиши *не* при нажатии

Я пишу библиотеку, которая изменяет виджет в текстовую область, поэтому мне нужно определить, когда пользователь начинает что-то печатать:

this.$input.bind('keydown keyup', function() {
    if (this.$input.val() == …) { … }
}

.val() обновляется только при срабатывании keyup. Это слишком большая задержка. Я хочу знать состояние поля ввода на keydown. Знаете ли вы о библиотеке, улучшающей .val()?


person bushytop    schedule 28.09.2011    source источник


Ответы (4)


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

изменить: есть также событие ввода, которое срабатывает, как только изменяется ввод (до нажатия клавиши, но после изменения значения);

person mpen    schedule 28.09.2011
comment
Поскольку текст в поле ввода мгновенно реагирует на ввод с клавиатуры, отложенный ответ моего виджета действительно выделяется. - person bushytop; 29.09.2011
comment
О, это событие HTML5 DOM. Тогда моя работа не будет такой легкой. - person bushytop; 29.09.2011

Единственный способ определить символ в keydown/keypress — это использовать свойство event.keyCode или event.which (где event — это объект, передаваемый в качестве первого аргумента функции прослушивателя событий).

Замените свои события на событие keypress. Этот прослушиватель событий срабатывает, когда клавиша нажата. keydown и keyup срабатывают только один раз. Во время события keydown/keyup могло быть добавлено несколько персонажей.

person Rob W    schedule 28.09.2011

Нашел, казалось бы, идеальное решение. Использует вышеупомянутый HTML5 oninput с onpropertychange запасными вариантами для IE. Блестящий. Фантастический. Другие радостные слова.

person bushytop    schedule 02.10.2011

Для нажатия клавиши (например, клавиши «a») событие keydown запускается до того, как «a» будет добавлено к текстовому вводу. Вы можете определить тип события и то, является ли свойство события .keyCode (или .which) ключом в печатаемом диапазоне, и попытаться предсказать, что .val() может вернуть после события keyup, но это плохая идея.

this.$input.bind('keydown keyup', function(e) {
    var val = this.$input.val();

    if (e.type == 'keydown') {
        // Here is where you would check to see if e.keyCode was a printable
        // character.  Note that key codes differ from ASCII codes. For
        // example, the "a" key will return key code 65, which is actually
        // the ASCII code for "A", so you would need to check for the presence
        // of shift keys and such.  Again, this is a bad idea :)
        val += String.fromCharCode(e.keyCode);
    }

    if (val == …) { … }
}
person FtDRbwLXw6    schedule 28.09.2011
comment
@Matthew: Потому что он втыкает квадратный колышек в круглое отверстие. Событие keydown по определению происходит раньше всего при нажатии клавиши. Это означает, что все, что управляет переводом ключей в текст, еще не успело запуститься. Таким образом, это будет в основном повторная реализация этой логики перевода гораздо менее интуитивным и всеобъемлющим образом. Другими словами, вы заново изобретаете устаревшее колесо. - person FtDRbwLXw6; 30.09.2011