Блог

Главная - Вопросы по программированию - Мгновенное обновление / показать, что написано в поле ввода с помощью onkeydown Javascript

Мгновенное обновление / показать, что написано в поле ввода с помощью onkeydown Javascript

#javascript

#javascript

Вопрос:

Я пытался одновременно показать, что написано в поле ввода в сообщении div, но результат всегда на 1 шаг вперед / назад.

 function showWhatsWritten(){
  var tempText;
  tempText = document.getElementById("text").value;
  document.getElementById("message").innerHTML = tempText;
}

<input id="text" type="text" onkeydown="showWhatsWritten()"/>
<div id="message"></div>

Результат всегда такой:

 input: 123456

output: 12345  (missing 6)

input: abcde

output: abcd (missing e)

Любая помощь будет оценена! Спасибо!

Комментарии:

1. Я не уверен, что ввод уже обновляется при запуске события нажатия клавиши. Попробуйте нажать клавишу или клавишу вверх

Ответ №1:

Вам просто нужно использовать правильное событие, onkeyup . Попробуйте JSFiddle:

 <input id="text" type="text" onkeyup="showWhatsWritten()"/>

Комментарии:

1. Спасибо! Теперь это работает! но что не так с onkeydown? Конечно, при нажатии клавиши «вниз» запускается событие?

2. Безусловно, ваше событие запускается немедленно, как только вы нажимаете клавишу вниз. Проблема в том, что нажатие клавиши — это событие клавиатуры, которое срабатывает сразу при нажатии вашей клавиши и до того, как значение самого фактического ввода обновляется, реагируя на нажатие клавиши. Вот почему вы получали input значение и видели, что оно еще не было обновлено.

Ответ №2:

Скорее комментарий, чем ответ.

Вы можете значительно упростить свой код:

 <input type="text" onkeyup="
  document.getElementById('message').innerHTML=this.value
">