Мгновенный вывод текста из инпута в див

nicolaa

Как мгновенно вывести текст из инпута в див У нас есть обычный инпут и див Когда мы пишем любой текст в инпут, он автоматически появляеться в диве

2 ответа

nicolaa

Для решения задачи можно использовать событие oninput:

function onInput() {
    var input = document.getElementById("input");
    var div = document.getElementById("div");
    if (div != null && input != null)
        div.innerHTML = input.value;
}

Возникает вопрос: а почему не *******? По двум причинам.

Во-первых, при зажатой кнопке ввод в input будет продолжаться, а в div изменения попадут только при отпускании кнопки.

А во-вторых, ввод возможен и без помощи клавиатуры, например, вставка щелчком мыши по контекстному меню. В этом случае обработчик ******* вообще не будет вызван.

P.S. Возможны проблемы с IE9 и более старыми (https://learn.javascript.ru/events-change#%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D0%B5-input).


nicolaa

На скорую руку - добавляете обработчик нажатий в вашем инпуте, который будет копировать содержимое инпута в див.

var input = document.getElementById("input");
var div = document.getElementById("div");
input.addEventListener("*****", function() {
  div.innerText = input.value;
})
#div {
  height: 200px;
  border: 2px solid;
}

licensed under cc by-sa 3.0 with attribution.