Старое значение при keypress/keydown

105

22 апреля 2021, 21:10

Есть вопрос уточнение для детального понимания события клавиши.

Подскажите, если мы запускаем такой код

<input onkeydown="this.nextElementSibling.innerHTML=this.value" type="text" placeholder="Вводите символы"> 
<b></b>

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

Но если мы запустим такой код

<input onkeydown="this.nextElementSibling.innerHTML= e.key" type="text" placeholder="Вводите символы">
<b></b>

То все сработает сразу.

У меня есть предположение, что при первом варианте, значение еще не успело записаться, в input. То есть запись в элемент происходит после срабатывания события.

Хотел узнать у более опытных так ли это?

Answer 1

input.addEventListener('keydown', () => { 
  console.log('Нажали, но не отпустили: ' + input.value); 
}); 
 
input.addEventListener('keyup', () => { 
  console.log('Отпустили: ' + input.value); 
});

<input id='input' onkeydown="this.nextElementSibling.innerHTML=this.value" type="text" placeholder="Вводите символы"> 
<b></b>

Так происходит, потому что на момент нажатия value элемента пустой.

Второй пример работает, потому что он возвращается значение нажатой кнопки, которое в момент нажатия(но ещё не отпустили) известно. Ему всё равно, что находится в value