Добавление данных через форму
Создадим простую форму, состоящую из текствого поля и кнопки.
Следует написать код для кнопки, которая будет помещать введённый текст в список.
У нас есть идентификатор кнопки, к которой можно получить доступ через getElementById().
var button = document.getElementById("button"); Далее следует написать код, который будет вызываться при событии click. Код оформим в виде функции с именем buttonClickHandler.
function buttonClickHandler()
Соединяем свойство кнопки onclick с функцией.
button.onclick = buttonClickHandler; Полностью код сценария будет следующим.
window.onload = init; function init() < var button = document.getElementById("button"); button.onclick = buttonClickHandler; >function buttonClickHandler() Это была тестовая версия для проверки. Теперь нам нужно научиться получать текст из текстового поля и добавлять его в список. Доступ к текстовому полю получаем через знакомую функцию getElementById(). Далее мы получим текст из него через свойство value. Перепишем код для кнопки.
function buttonClickHandler() < var textInput = document.getElementById("textInput"); var catName = textInput.value; // если строка пустая if(catName == "") < alert("Введите имя кота, пожалуйста"); >else < alert("Добавлен " + catName); textInput.value = ""; >> Остался последний штрих — добавить имя кота в список с идентификатором catList. Нам придётся добавлять новый элемент списка li и размещать в нём имя. Так как элементов li у нас не существует, мы не можем вызывать функцию getElementById(). Вместо неё вызывается другая функция для создания нового элемента document.createElement(). После создания можно присвоить ему текст.
var li = document.createElement("li"); li.innerHTML = catName; Элемент готов, но он ещё не является частью DOM, нам нужно явно указать, куда мы собираемся его вставить. В нашем случае li является дочерним элементом ul.
var ul = document.getElementById("catList"); ul.appendChild(li); Снова переписываем код для щелчка кнопки.
function buttonClickHandler() < var textInput = document.getElementById("textInput"); var catName = textInput.value; // если строка пустая if(catName == "") < alert("Введите имя кота, пожалуйста"); >else < //alert("Добавлен " + catName); var li = document.createElement("li"); li.innerHTML = catName; var ul = document.getElementById("catList"); ul.appendChild(li); textInput.value = ""; >> Свойства и методы формы
Формы и элементы управления, такие как , имеют множество специальных свойств и событий.
Работать с формами станет намного удобнее, когда мы их изучим.
Навигация: формы и элементы
Формы в документе входят в специальную коллекцию document.forms .
Это так называемая «именованная» коллекция: мы можем использовать для получения формы как её имя, так и порядковый номер в документе.
document.forms.my - форма с именем "my" (name="my") document.forms[0] - первая форма в документеКогда мы уже получили форму, любой элемент доступен в именованной коллекции form.elements .
Может быть несколько элементов с одним и тем же именем, это часто бывает с кнопками-переключателями radio .
В этом случае form.elements[name] является коллекцией, например:
Эти навигационные свойства не зависят от структуры тегов внутри формы. Все элементы управления формы, как бы глубоко они не находились в форме, доступны в коллекции form.elements .
Форма может содержать один или несколько элементов внутри себя. Они также поддерживают свойство elements , в котором находятся элементы управления внутри них.
Есть более короткая запись: мы можем получить доступ к элементу через form[index/name] .
Другими словами, вместо form.elements.login мы можем написать form.login .
Это также работает, но есть небольшая проблема: если мы получаем элемент, а затем меняем его свойство name , то он всё ещё будет доступен под старым именем (также, как и под новым).
В этом легче разобраться на примере:
Обычно это не вызывает проблем, так как мы редко меняем имена у элементов формы.
Обратная ссылка: element.form
Для любого элемента форма доступна через element.form . Так что форма ссылается на все элементы, а эти элементы ссылаются на форму.
Элементы формы
Рассмотрим элементы управления, используемые в формах.
input и textarea
К их значению можно получить доступ через свойство input.value (строка) или input.checked (булево значение) для чекбоксов.
input.value = "Новое значение"; textarea.value = "Новый текст"; input.checked = true; // для чекбоксов и переключателейОбратим внимание: хоть элемент и хранит своё значение как вложенный HTML, нам не следует использовать textarea.innerHTML для доступа к нему.
Там хранится только тот HTML, который был изначально на странице, а не текущее значение.
select и option
Элемент имеет 3 важных свойства:
- select.options – коллекция из подэлементов ,
- select.value – значение выбранного в данный момент ,
- select.selectedIndex – номер выбранного .
Они дают три разных способа установить значение в :
- Найти соответствующий элемент и установить в option.selected значение true .
- Установить в select.value значение нужного .
- Установить в select.selectedIndex номер нужного .
Первый способ наиболее понятный, но (2) и (3) являются более удобными при работе.
Вот эти способы на примере:
В отличие от большинства других элементов управления, позволяет нам выбрать несколько вариантов одновременно, если у него стоит атрибут multiple . Эту возможность используют редко, но в этом случае для работы со значениями необходимо использовать первый способ, то есть ставить или удалять свойство selected у подэлементов .
Их коллекцию можно получить как select.options , например:
new Option
Элемент редко используется сам по себе, но и здесь есть кое-что интересное.
В спецификации есть красивый короткий синтаксис для создания элемента :
option = new Option(text, value, defaultSelected, selected);- text – текст внутри ,
- value – значение,
- defaultSelected – если true , то ставится HTML-атрибут selected ,
- selected – если true , то элемент будет выбранным.
Тут может быть небольшая путаница с defaultSelected и selected . Всё просто: defaultSelected задаёт HTML-атрибут, его можно получить как option.getAttribute(‘selected’) , а selected – выбрано значение или нет, именно его важно поставить правильно. Впрочем, обычно ставят оба этих значения в true или не ставят вовсе (т.е. false ).
let option = new Option("Текст", "value"); // создаст Тот же элемент, но выбранный:
let option = new Option("Текст", "value", true, true);option.selected Выбрана ли опция. option.index Номер опции среди других в списке . option.value Значение опции. option.text Содержимое опции (то, что видит посетитель).
Ссылки
Итого
Свойства для навигации по формам:
document.forms Форма доступна через document.forms[name/index] . form.elements Элементы формы доступны через form.elements[name/index] , или можно просто использовать form[name/index] . Свойство elements также работает для . element.form Элементы хранят ссылку на свою форму в свойстве form .
Значения элементов формы доступны через input.value , textarea.value , select.value и т.д. либо input.checked для чекбоксов и переключателей.
Для элемента мы также можем получить индекс выбранного пункта через select.selectedIndex , либо используя коллекцию пунктов select.options .
Это были основы для начала работы с формами. Далее в учебнике мы встретим ещё много примеров.
В следующей главе мы рассмотрим такие события, как focus и blur , которые могут происходить на любом элементе, но чаще всего обрабатываются в формах.
Javascript вставить в поле
Для ввода простейшей текстовой информации предназначены элементы
Данный элемент поддерживает ряд событий, в частности:
- focus : происходит при получении фокуса
- blur : происходит при потере фокуса
- change : происходит при изменении значения поля
- select : происходит при выделении текста в текстовом поле
- keydown : происходит при нажатии клавиши клавиатуры
- keypress : происходит при нажатии клавиши клавиатуры для печатаемых символов
- keyup : происходит при отпускании ранее нажатой клавиши клавиатуры
Здесь к текстовому полю прикрепляется три обработчика для событий blur, focus и change. Обработка события change позволяет сформировать что-то вроде привязки: при изменении текста весь текст отображается в блоке printBlock. Но надо учитывать, что событие change возникает не сразу после изменения текста, а после потери им фокуса.
Обработка события потери фокуса blur позволяет провести валидацию введенного значения. Например, в данном случае если текст состоит из пробелов или не был введен, то окрашиваем границу поля в красный цвет.
Если нам надо, чтобы на форме было некоторое значение, но чтобы оно было скрыто от пользователя, то для этого могут использоваться скрытые поля:
Для скрытого поля обычно не используется обработка событий, но также, как и для других элементов, мы можем в javascript получить его значение или изменить его.
Элемент textarea
Для создания многострочных текстовых полей используется элемент textarea :
Данные элемент генерирует все те же самые события, что и обычное текстовое поле:
Здесь к текстовому полю прикрепляются обработчики для событий keypress и keydown. В обработчике keypress получаем введенный символ с помощью конвертации числового кода клавиши в строку:
var val = String.fromCharCode(e.keyCode);
Затем символ добавляется к содержимому блока printBlock.
Событие keypress возникает при нажатии на клавиши для печатаемых символов, то такие символы отображаются в текстовом поле. Однако есть и другие клавиши, которые оказывают влияние на текстовое поле, но они не дают отображаемого символа, поэтому не отслеживаются событием keypress. К таким клавишам относится клавиша Backspace, которая удаляет последний символ. И для ее отслеживания также обрабатываем событие keydown. В обработчике keydown удаляем из строки в блоке printBlock последний символ.