Как передать информацию из input в div онлайн и без кнопки?

Question

Подскажите как передать информацию из input-form в box. То есть я набиваю текст в инпуте и он тут же отображается в box. Заранее благодарю.

<body>
<input type="text" class="input-form">
<div class="box"></div>
</body>

Answer 1

    window.onload = function () { // При загрузке документа
        let text = document.getElementsByClassName('input-form')[0]; // Получаем первый элемент с классом input-form
        let box = document.getElementsByClassName('box')[0]; // Получаем первый элемент с классом box
        text.oninput = function () { // Отслеживаем ввод в поле input
            box.innerText = this.value;  // В box выводим вводимый текст.
        }
    }

<body>
<input type="text" class="input-form">
<div class="box"></div>
</body>

Answer 2

document.getElementById('inputid').addEventListener // добавляем событие
  (
    'input', // на ввод
    function name(e){ // задаём имя, чтобы потом можно было сбросить  выполнение функции на событие
      document.getElementById('boxid').innerText = this.value; // задаем текстом div'a значение поля, которое "прослушиваем"
    }
  )

<input id="inputid" type="text" class="input-form">
<div id="boxid" class="box"></div>

Answer 3

Используй JQ

$('input[type="text"]').keydown(({currentTarget})=>{
    const txt = $(currentTarget).val();
    $('div.box').text(txt);
});

Answer 4

Просто так захотелось

const $ = (selector) => document.querySelector(selector);
$('.input-form').oninput = function(){ $('.box').innerText = this.value }

<body>
<input type="text" class="input-form">
<div class="box"></div>
</body>

БЛОГ НА HUSL

Как передать информацию из input в div онлайн и без кнопки?

Ответы (4 шт):