У меня есть текстовое поле:
<input type="text">
Я использую jQuery для обработки событий, связанных с ключевыми словами:
$("input:text").keydown(function() {
// keydown code
}).keypress(function() {
// keypress code
}).keyup(function() {
// keyup code
});
Пользователь фокусируется на текстовом поле и нажимает на клавиатуре различные клавиши (обычные: буквы, цифры, SHIFT, BACKSPACE, SPACE,...). Мне нужно определить, когда пользователь нажимает клавишу, которая увеличит длину текстового поля. Например, клавиша "A" увеличит ее, клавиша "SHIFT" не будет использоваться.
Я помню, как я смотрел лекцию ППК, где он упомянул о различии между этими двумя. Это имеет какое-то отношение к событию - keydown vs. keypress - и, возможно, к свойствам события - key, char, keyCode.
Обновить!
Мне нужно знать эту информацию в обработчиках keydown или keypress. Я не могу дождаться события keyup.
Зачем мне это нужно:
У меня есть текстовое поле, размер которого динамически изменяется на основе ввода пользователя. Вы можете посмотреть эту демонстрацию: http://vidasp.net/tinydemos/variable-size-text-box.html
В демо, у меня есть keydown и keyup handler. Обработчик клавиш настраивает размер текстового поля на основе входного значения. Однако обработчик keydown устанавливает размер на 1 символ больше, чем входное значение. Причина, по которой я это делаю, заключается в том, что если бы я этого не сделал, тогда символ переполнился бы за пределами текстового поля, и только когда пользователь отпустит ключ, текстовое поле будет расширяться. Это выглядит странно. Поэтому я должен предвидеть нового персонажа - я увеличиваю текстовое поле на каждом keydown, ergo, прежде чем символ появится в текстовом поле. Как вы можете видеть в демо, этот метод выглядит великолепно.
Однако проблема заключается в ключах BACKSPACE и ARROW - они также будут расширять текстовое поле при нажатии клавиши, и только при нажатии клавиши размер текстового поля будет исправлен.
Обход:
Обход должен состоять в том, чтобы вручную определить клавиши BACKSPACE, SHIFT и ARROW и действовать на основе этого:
// keydown handler
function(e) {
var len = $(this).val().length;
if (e.keyCode === 37 || e.keyCode === 39 ||
e.keyCode === 16) { // ARROW LEFT or ARROW RIGHT or SHIFT key
return;
} else if (e.keyCode === 8) { // BACKSPACE key
$(this).attr("size", len <= 1 ? 1 : len - 1);
} else {
$(this).attr("size", len === 0 ? 1 : len + 1);
}
}
Это работает (и отлично выглядит) для BACKSPACE, SHIFT, ARROW LEFT и ARROW RIGHT. Тем не менее, я хотел бы иметь более надежное решение.
