Мастер-классы по Javascript Екатеринбург Ростов-на-Дону Москва Узнать больше...
Содержание (скрыть) Содержание (показать)

Формы

Навигация по формам

  1. Форма
  2. От элементов к форме
  3. Итого

Для форм есть дополнительные свойства DOM, которые упрощают навигацию и поиск элементов.

Свойства элементов

  1. input, textarea
  2. input type="checkbox", input type="radio"
  3. select, option
  4. Практика

Рассмотрим основные элементы формы и средства для работы с ними.

События "change", "input", "propertychange"

  1. Событие change
  2. Событие propertychange
  3. Событие input
  4. События cut, copy, paste
  5. Пример: поле для СМС
  6. Итого

На элементах формы происходят события клавиатуры и мыши, но есть и несколько других, особенных событий.

Событие change

Событие change происходит при изменении значения элемента формы. По стандарту, оно должно происходить после того, как элемент теряет фокус.

В реальности оно так и происходит для текстовых элементов.

Например, пока вы набираете что-то в текстовом поле ниже — события нет.

Метод и событие "submit"

  1. Событие submit
  2. Метод submit

JavaScript может делать с формами почти всё, что угодно. Единственное, что он не может — это самостоятельно заполнять поля <input type="file">, без инициативы пользователя.

Наиболее частое применение — это валидация (проверка) формы перед отправкой.

События и методы "focus/blur"

  1. Пример использования focus/blur
  2. HTML5 и CSS3 вместо focus/blur
  3. Метод elem.focus()
  4. Разрешаем фокус на любом элементе: tabindex
  5. Событие blur и метод elem.blur()
  6. Делегирование с focus/blur
  7. Итого

Событие focus вызывается тогда, когда пользователь фокусируется на элементе, например кликает на INPUT.

Событие blur вызывается, когда фокус исчезает, например посетитель кликает на другом месте экрана.


Комментарии

  1. Приветствуются комментарии, содержащие дополнения и вопросы по статье, и ответы на них.
  2. Если ваш комментарий касается задачи -- откройте её в отдельном окне и напишите там.
  3. Комментарии без смысла, с рекламой или не о статье вообще - удаляются.
Наверх

Содержание

Реклама

Нашли опечатку?

Нашли опечатку на сайте? Что-то кажется странным?
Выделите соответствующий текст и нажмите Ctrl+Enter!

Последние Комментарии

Помоги другим!

Помоги другим узнать о хорошей статье!