Как продублировать текст вводимый в форму?

Question

[Anto]

Приветствую!

Подскажите есть form и в ней есть поля текстовое с телефоном как сделать так что бы при вводе данных в форму они про дублировались в другом месте на странице скажем внизу страницы сайта.

Answer 1

[0xD34F]

<form>
  <div><input data-output="#output1"></div>
  <div><input data-output="#output2"></div>
  <div><textarea data-output="#output3"></textarea></div>
</form>

<div id="output1"></div>
<div id="output2"></div>
<div id="output3"></div>

document.querySelector('form').addEventListener('input', e => {
  const output = document.querySelector(e.target.dataset.output);
  if (output) {
    output.innerHTML = e.target.value;
  }
});

или

<form>
  <div><input></div>
  <div><input></div>
  <div><textarea></textarea></div>
</form>

<div class="output"></div>
<div class="output"></div>
<div class="output"></div>

const input = [...document.querySelector('form').elements];
const output = document.querySelectorAll('.output');
const onInput = ({ target: t }) => output[input.indexOf(t)].innerText = t.value;
input.forEach(n => n.addEventListener('input', onInput));

Comments

[Anto]

Подскажите, если у меня 4 поля input и 1 поле textarea, как привязать к этим полям это?

[0xD34F]

ANTON K., обновил ответ.

[Anto]

Спасибо!

[Anto]

0xD34F, Подскажите как правильно его подключить на сайте: прописываю так:

<script>
document.querySelector('form').addEventListener('input', function(e) {
  var
    target = e.target,
    output = document.querySelector(target.getAttribute('data-output'))

  if (output) {
    output.innerHTML = target.value
  }
})
</script>

Но не работает.

[0xD34F]

ANTON K., "не работает"? Извините, я не ясновидящий, нужно больше информации.