Используя keydown(), почему после первого символа в случае предупреждения значение пустое?

Question

Если я нажму (первый раз) символ, то предупреждение выдаст пустое значение.

Как это возможно? Я не понимаю

$('#search-vulc').on('keydown', function() {
  var textinsert = ($(this).val()).toLowerCase();
  alert(textinsert);
});

Подскажите пожалуйста, как я могу распечатать его с первого раза, когда персонаж нажимается.

Вот также пример jsfiddle:

https://jsfiddle.net/06xg4c78/1/

Answer 1

Используйте событие keuyp:

Это потому что keypress events запускаются до того, как новый символ добавляется к значению элемента (поэтому первый keypress event срабатывает до добавления первого символа, в то время как значение все еще пусто). Вы должны использовать keyup вместо этого, который запускается после того, как персонаж был добавлен.

$('#search-vulc').on('keyup', function() {
  var textinsert = ($(this).val()).toLowerCase();
  alert(textinsert);
});

Answer 2

Если вы используете keydown функции это работает, прежде чем дом получает входное значение

использование keyup который запускает событие, когда вы покидаете ключ, чтобы получить введенное значение

$('#search-vulc').on('keyup', function() {
  var textinsert = ($(this).val()).toLowerCase();
  alert(textinsert);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="text" size="150" style="width: 150px;" name="qu" id="search-vulc">

Answer 3

Использование keyup вместо:

$('#search-vulc').on('keyup', function() {

  var textinsert = ($(this).val()).toLowerCase();
  alert(textinsert);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<input type="text" size="150" style="width: 150px;" name="qu" id="search-vulc">

Обновленная скрипка: https://jsfiddle.net/06xg4c78/2/