Как изменить атрибут VALUE поля <input>в реальном времени с помощью JavaScript?

Question

Я хочу изменить значение поля input в режиме реального времени, когда пользователь вводит в другое поле input , предпочтительно с использованием обычного JS, а не JQuery.

Пример: пользователь вводит случайное значение в # input_1 , и в то же время # input_2 получает все, что пользователь печатает, и устанавливает его в своем значении.

Если пользователь удаляет число из значения # input_1 , следует # input_2 и удаляет тот же номер из его значения.

Это все в realвремя и предпочтительно без нажатия кнопки для запуска функции, которая делает это.

Answer 1

Легко;)

<input id="input1" onkeyup="document.getElementById('input2').value=this.value" />
<input id="input2" />

Answer 2

вы можете сделать это следующим образом

Вам необходимо выбрать первый вход (для события) и получить значение из этого входа и обновить во втором.

function handle(e){
  var input1 = document.getElementById('input1').value;
  console.log(input1)
  document.getElementById('input2').value = input1;
}

<input id='input1' onkeyup="handle()" value=""/>
<input id='input2'  value="" />

Answer 3

Есть много способов реализовать это.Вот как бы я это сделал:

HTML:

<input id="sourceField" />
<input id="destinationField" />

JS:

// When the page is done loading and rendering...
window.addEventListener('DOMContentLoaded', ()=>{
    // Get the appropriate elements
    const sourceField = document.getElementById('sourceField')
    const destinationField = document.getElementById('destinationField')

    // When the user types some input into the first text field...
    sourceField.addEventListener('input', ()=>{
        // Set the value of the destination field to the value of the source field.
        destinationField.value = sourceField.value
    })
})