Как изменить атрибут VALUE поля <input> в реальном времени с помощью JavaScript?
Я хочу изменить значение поля Вход в реальном времени, когда пользователь вводит другое поле Вход, желательно с использованием обычного JS, а не JQuery.
Пример: Пользователь вводит случайное значение в # input_1, и в ТО ЖЕ ВРЕМЯ # input_2 получает все, что вводит пользователь, и устанавливает его на свое значение.
Если пользователь удаляет число из значения # input_1, # input_2 следует за ним и удаляет то же число из его значения.
Все это в реальное время и предпочтительно без нажатие кнопки для курок функции, которая это делает.
@YaakovAinspan Пытался, но не нашел ничего подходящего.
inp1.oninput=x=>inp2.value=inp1.value;Без захвата нажатия кнопки единственным способом было бы использовать тайм-аут / интервал. Это было бы намного менее эффективно.
@james, это неправда.
@YaakovAinspan Я считаю, что любые события типа oninput и onkeyup фиксируют нажатие кнопки.
@James Я думаю (почти уверен), что OP имеет в виду нажатие кнопки как нажатие на элемент button.
@YaakovAinspan Я с уважением не согласен. Я думаю, они имеют в виду нажатие на клавиатуру.
@PolarDog что ты скажешь?
Вопрос @James говорит, что "пользователь вводит input1" ... используя что? Не клавиатура?
@YaakovAinspan Может ты и прав! Они не упоминают кнопку в html, но это тоже может означать.
@PolarDog, вы должны показать нам, что вы пробовали, пожалуйста, прочтите этот stackoverflow.com/help/mcve
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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
})
})
Вы необходимостьDOMContentLoaded? Пока он ниже элемента, все должно быть в порядке
@YaakovAinspan Вы правы, но мы не знаем, куда OP поместит этот JS, поэтому я предпочитаю включить его.
Я бы добавил это на саму страницу, если вы это имеете в виду. Не в отдельном файле .js.
@PolarDog Независимо от того, находится ли ваш JS в отдельном файле или встроен в ваш HTML, если загружающий его элемент <script> идет после элементов <input> в вашем HTML, вам не нужен DOMContentLoaded. Но мне нравится помещать элементы <script> в <head> моего HTML.
Я держу его под <head>, но над <body>.
Что бы ни плавало на вашей лодке, просто будьте последовательны. Кроме того, если вы поместите его в свой <head> и загрузите из внешнего файла, вы можете использовать новый атрибут defer для достижения того же эффекта.
Легкий ;)
<input id = "input1" onkeyup = "document.getElementById('input2').value=this.value" />
<input id = "input2" />Это, безусловно, сработает, но в целом рекомендуется не использовать встроенные атрибуты Javascript. Это способствует повторению кода и размывает разделение проблем.
@RobertAKARobin Зависит от использования, чувак;)
ты можешь сделать это вот так
Вам нужно выбрать первый вход (по событию) и взять значение из этого входа и обновить во втором.
function handle(e){
var input1 = document.getElementById('input1').value;
console.info(input1)
document.getElementById('input2').value = input1;
}<input id='input1' onkeyup = "handle()" value = ""/>
<input id='input2' value = "" />
Вы это гуглили?