Необходимы разъяснения относительно события keydown в Javascript и jQuery

#jquery #dom-events #keydown

#jquery #dom-события #keydown

Вопрос:

У меня есть следующий код jQuery:

 $("#someTextInputID").keydown(function(event){
 console.log(event.keyCode);
 console.log("input_box.val(): " input_box.val());
 console.log("input_box.val().length: " input_box.val().length);
})
  

Что меня озадачивает, так это то, что если я набираю «750», регистрируются три ключевых кода, но я также получаю это в своей консоли после ввода строки выше:

input_box.val(): 75

input_box.val().длина: 2

Что происходит тогда с последним символом, т.Е. «0»?

Ответ №1:

Довольно просто, последняя нажатая клавиша не находится в .value из input до keyup события.

Порядок событий при нажатии клавиши следующий:

  1. keydown (срабатывает не более одного раза за нажатие клавиши, клавиша доступна в event.which , но не в .value )
  2. keypress (срабатывает по крайней мере один раз за нажатие клавиши (например, если вы удерживаете клавишу нажатой), клавиша доступна в event.which , но не в .value )
  3. keyup (срабатывает не более одного раза за нажатие клавиши, клавиша доступна в event.which , и в .value )

Вы можете определить, какая клавиша была нажата во время фазы keydown или keypress , изучив which свойство Event объекта и используя String.fromCharCode метод.

Еще один полезный прием, который вы можете использовать, — использовать setTimeout , но передавать значение 0 в качестве задержки. Задержка 0 добавляет обратный вызов к задней части callstack, что задерживает выполнение достаточно долго для .value обновления.:

 $("#someTextInputID").keydown(function(event){
    var that = this;

    setTimeout(function () {
        console.log(that.value); // will record value
    }, 0);
})    
  

Ответ №2:

Используйте это

 $("#someTextInputID").keyup(function(event){
 console.log(event.keyCode);
 console.log("input_box.val(): " input_box.val());
 console.log("input_box.val().length: " input_box.val().length);
})