События: change, input, cut, copy, paste
Давайте рассмотрим различные события, сопутствующие обновлению данных.
Событие: change
Событие change срабатывает по окончании изменения элемента.
Для текстовых это означает, что событие происходит при потере фокуса.
Пока мы печатаем в текстовом поле в примере ниже, событие не происходит. Но когда мы перемещаем фокус в другое место, например, нажимая на кнопку, то произойдёт событие change :
Для других элементов: select , input type=checkbox/radio событие запускается сразу после изменения значения:
Событие: input
Событие input срабатывает каждый раз при изменении значения.
В отличие от событий клавиатуры, оно работает при любых изменениях значений, даже если они не связаны с клавиатурными действиями: вставка с помощью мыши или распознавание речи при диктовке текста.
Если мы хотим обрабатывать каждое изменение в , то это событие является лучшим выбором.
С другой стороны, событие input не происходит при вводе с клавиатуры или иных действиях, если при этом не меняется значение в текстовом поле, т.е. нажатия клавиш ⇦ , ⇨ и подобных при фокусе на текстовом поле не вызовут это событие.
Нельзя ничего предотвратить в oninput
Событие input происходит после изменения значения.
Поэтому мы не можем использовать event.preventDefault() там – будет уже слишком поздно, никакого эффекта не будет.
События: cut, copy, paste
Эти события происходят при вырезании/копировании/вставке данных.
Они относятся к классу ClipboardEvent и обеспечивают доступ к копируемым/вставляемым данным.
Мы также можем использовать event.preventDefault() для предотвращения действия по умолчанию, и в итоге ничего не скопируется/не вставится.
Например, код, приведённый ниже, предотвращает все подобные события и показывает, что мы пытаемся вырезать/копировать/вставить:
Технически, мы можем скопировать/вставить всё. Например, мы можем скопировать файл из файловой системы и вставить его.
Существует список методов в спецификации для работы с различными типами данных, чтения/записи в буфер обмена.
Но обратите внимание, что буфер обмена работает глобально, на уровне ОС. Большинство браузеров в целях безопасности разрешают доступ на чтение/запись в буфер обмена только в рамках определённых действий пользователя, к примеру, в обработчиках событий onclick .
Также запрещается генерировать «пользовательские» события буфера обмена при помощи dispatchEvent во всех браузерах, кроме Firefox.
Итого
События изменения данных:
| Событие | Описание | Особенности |
|---|---|---|
| change | Значение было изменено. | Для текстовых полей срабатывает при потере фокуса. |
| input | Срабатывает при каждом изменении значения. | Запускается немедленно, в отличие от change . |
| cut/copy/paste | Действия по вырезанию/копированию/вставке. | Действие можно предотвратить. Свойство event.clipboardData предоставляет доступ на чтение/запись в буфер обмена… |
Задачи
Депозитный калькулятор
Создайте интерфейс, позволяющий ввести сумму банковского вклада и процент, а затем рассчитать, какая это будет сумма через заданный промежуток времени.
Любое изменение введённых данных должно быть обработано немедленно.
// initial: начальная сумма денег // interest: проценты, например, 0.05 означает 5% в год // years: сколько лет ждать let result = Math.round(initial * (1 + interest) ** years);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.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 .
Перейти к заданию
- index.html Сплит-режим
- style.css Сплит-режим
- script.js Сплит-режим