js передать значение в input
Для передачи значения в input элемент на странице в JavaScript нужно:
- Получить ссылку на элемент input — это можно сделать с помощью метода document.querySelector() и передать в него соответствующий селектор, например:
const inputElement = document.querySelector('#my-input'); Здесь мы ищем элемент с id=»my-input» .
- Установить значение для input элемента — это можно сделать присвоив значение свойству value элемента input , например:
inputElement.value = 'Hello World'; Здесь мы устанавливаем значение ‘Hello World’ для свойства value элемента input .
type="text" id="my-input" /> const inputElement = document.querySelector('#my-input'); inputElement.value = 'Hello World'; После выполнения этого кода в поле input будет установлено значение ‘Hello World’.
input
`Событие, срабатывающее каждый раз при изменении значения.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
- Кратко
- Простой пример
- Как пишется
- Отличие от события change
- Примечания
Обновлено 18 апреля 2024
Кратко
Скопировать ссылку «Кратко» Скопировано
Событие input возникает, когда пользователь изменяет содержимое поля для ввода информации.
Примеры таких полей:
Событие input возникает, когда DOM-дерево обновляется или вот-вот обновится. Если пользователь вставит текст из буфера обмена, то событие input возникнет один раз. Если же пользователь печатает текст, то событие input возникает после добавления и удаления каждого символа.
Простой пример
Скопировать ссылку «Простой пример» Скопировано
Введите текст: При каждом изменении возникает событиеinput: var inputTextField = document.getElementById('textField') var outputTextField = document.getElementById('textResult') inputTextField.oninput = function() outputTextField.value = inputTextField.value >label> Введите текст: input type="text" id="textField"> label> label> При каждом изменении возникает событие code>inputcode>: textarea disabled id="textResult">textarea> label> script> var inputTextField = document.getElementById('textField') var outputTextField = document.getElementById('textResult') inputTextField.oninput = function() outputTextField.value = inputTextField.value > script>
Как пишется
Скопировать ссылку «Как пишется» Скопировано
const textInput = document.querySelector('input[type=text]') function callback(evt) console.log(`Произошло событие $`)> textInput.addEventListener('input', callback)const textInput = document.querySelector('input[type=text]') function callback(evt) console.log(`Произошло событие $evt.type>`) > textInput.addEventListener('input', callback)
Если ввести в текстовое поле слово «Дока» и щёлкнуть вне этого поля, в консоли будут показаны сообщения: «4 раза: Произошло событие input ».
Отличие от события change
Скопировать ссылку «Отличие от события change» Скопировано
События input и change похожи — оба помогают отслеживать изменения в полях ввода.
Различие есть для текстовых полей ввода:
- input — срабатывает при каждом изменении значения в поле;
- change — срабатывает, когда изменяемый элемент теряет фокус. Например, при переходе к другому полю или клику на другую часть страницы.
Для прочих полей ввода они работают одинаково:
Кликните: Типы событий: const checkbox = document.querySelector('[name=checkbox-input]') const textArea = document.querySelector('[name=checkbox-result]') function handleCheckboxChange(evt) textArea.value += evt.type + '; ' > checkbox.addEventListener('input', handleCheckboxChange) checkbox.addEventListener('change', handleCheckboxChange)label> Кликните: input type="checkbox" name="checkbox-input"> label> label> Типы событий: textarea disabled name="checkbox-result">textarea> label> script> const checkbox = document.querySelector('[name=checkbox-input]') const textArea = document.querySelector('[name=checkbox-result]') function handleCheckboxChange(evt) textArea.value += evt.type + '; ' > checkbox.addEventListener('input', handleCheckboxChange) checkbox.addEventListener('change', handleCheckboxChange) script>
Примечания
Скопировать ссылку «Примечания» Скопировано
Событие input не произойдёт, если:
- текст не меняется, например, при нажатиях клавиш влево ⇦ , вправо ⇨ , Control , Alt , Shift ;
- тег имеет атрибут type = «button» или type = «submit» ;
- поле изменит не пользователь, а JavaScript-код. Чтобы в этом случае получить событие input , нужны дополнительные действия. К примеру, использовать dispatch Event ( ) .
Получаем данные из поля ввода с помощью input.value
Мы научились с помощью скрипта изменять текст на странице, когда пользователь отправляет форму. У нас это форма подписки на рассылку, и нам нужно сообщить пользователю, что он успешно подписался. Сообщение будет выглядеть так:
Адрес e-mail добавлен в список получателей рассылки.Адрес электронной почты в сообщении должен быть тем, который введёт пользователь. Как его получить?
Нам поможет особое свойство, которое есть у полей ввода, — value . Допустим, на странице есть поле ввода input :
Босс проходил мимо и ввёл туда своё имя — Кекс. С помощью свойства value мы можем получить данные из этого поля ввода. А после, например, вывести их в консоль:
let input = document.querySelector('input'); console.log(input.value); // Выведет: КексА ещё мы можем вывести данные из поля ввода прямо на страницу. Представим, что у нас на странице есть абзац, который мы нашли и сохранили в переменную paragraph . Мы можем сделать так:
paragraph.textContent = input.value;И теперь то, что ввёл пользователь в поле input , отобразится на странице как текстовое содержимое элемента paragraph .
В нашем случае пользователь вводит свой адрес в поле с классом subscription-email . Найдём его и скажем JavaScript вывести полученные данные на страницу.
Почему бы не прочитать текст из поля ввода с помощью textContent ? Если мы попытаемся это сделать, то получим пустую строку. Для JavaScript поля формы не имеют текстового содержимого, их значения хранятся именно в value .
Записывайтесь на трансляцию 16 мая в 13:00
Перейти к заданию
- index.html Сплит-режим
- style.css Сплит-режим
- script.js Сплит-режим