html — Как изменить атрибут ЗНАЧЕНИЕ поля в режиме реального времени с помощью JavaScript?

спросил

Изменено 4 года, 4 месяца назад

Просмотрено 4к раз

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

Пример: Пользователь вводит случайное значение в #input_1 , и В ТО ЖЕ ВРЕМЯ #input_2 получает все, что вводит пользователь, и устанавливает для него его значение.

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

Это все в в реальном времени

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

  • javascript
  • html
  • формы
  • ввод

13

Легко 😉

 
<ввод />

2

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

HTML:

 <ввод />
<ввод />

JS:

 // Когда страница загрузится и отобразится...
window.addEventListener('DOMContentLoaded', ()=>{
    // Получаем соответствующие элементы
    const sourceField = document.getElementById('sourceField')
    константное поле назначения = document.getElementById('destinationField')
    // Когда пользователь вводит данные в первое текстовое поле...
    sourceField.
 
 addEventListener('input', ()=>{
        // Установить значение целевого поля в значение исходного поля.
        целевое поле.значение = исходное поле.значение
    })
})

6

вы можете сделать это так

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

 дескриптор функции(e){
  var input1 = document.getElementById('input1').value;
  console.log(вход1)
  document.getElementById('input2').value = input1;
} 
 
<входное значение="" />

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Модель

— Alpine.

js

x-model позволяет привязать значение входного элемента к данным Alpine.

Вот простой пример использования x-model для привязки значения текстового поля к фрагменту данных в Alpine.

 
 
 
 
 
  
 
  

Теперь, когда пользователь вводит в текстовое поле, сообщение будет отражено в теге .

x-model имеет двустороннюю связь, то есть одновременно «устанавливает» и «получает». В дополнение к изменению данных, если изменяются сами данные, элемент будет отражать изменение.

Мы можем использовать тот же пример, что и выше, но на этот раз мы добавим кнопку для изменения значения свойства message .

 
 
 
 
 
 
 
 
  

Теперь при нажатии кнопки