Текст отображается с задержкой

Я хочу, чтобы текст, который я вводил в текстовое поле, немедленно отображался в div:

function func() {
  document.getElementById("query").innerHTML = document.getElementById("keyword").value;
}
window.onload = function() {
  keyword.onkeydown = function(e) {
    func();
  }
}

<input type="text" id="keyword" size="40">
<div id="query"></div>

Ответ 1

Событие запускается onkeydown. Поскольку значение входного элемента еще не изменилось, результаты не отображаются.

Вы можете изменить его на onkeyup, вместо этого: (обновленный пример). Или вы можете установить задержку перед вызовом функции.

Кроме того, вы также можете прослушать input событие:

Пример здесь

document.getElementById("keyword").addEventListener('input', function (e) {
    document.getElementById("query").textContent = e.target.value;
});

Ответ 2

Проблема заключается в том, что значение входного текста не изменяется до тех пор, пока вы не отпустите ключ. используя setTimeout, вы позволяете браузеру обновлять значение до, выполняя вашу функцию (func)

Я рекомендую не изменять onkeyup, потому что вы хотите onkeydown, это решение по-прежнему будет работать с использованием события onkeydown

keyword.onkeydown = function (e) {
        setTimeout(func,0)
    }

Обновить пример jsFiddle: http://jsfiddle.net/285cz0np/1/

Я рекомендую вам перейти на input событие. Например, если пользователь вставляет из буфера обмена (используя только мышь), ваше событие не срабатывает.

Ответ 3

Это связано с тем, что событие, которое запускает функцию, onkeydown, поэтому, когда клавиша нажата, функция считывает значение текстовой области. В это время он считывает данные, клавиша, которая нажата, еще не добавлена к фактическому значению.

Легкое исправление заключается в том, чтобы изменить событие на onkeyup, потому что к тому моменту, когда ключ находится в состоянии "вверх", значение этого ключа будет добавлено к значению.

window.onload = function () {
    keyword.onkeyup = function (e) {
        func();
    }
}