Выразительный JavaScript: Формы и поля форм
Содержание
Я нынче ж на ученом кутеже
Твое доверье службой завоюю,
Ты ж мне черкни расписку долговую,
Чтоб мне не сомневаться в платеже.
Мефистофель, в «Фаусте» Гёте
Формы были кратко представлены в предыдущей главе в качестве способа передачи информации, введённой пользователем, через HTTP. Они были разработаны в вебе до появления JavaScript, с тем расчётом, что взаимодействие с сервером происходит при переходе на другую страницу.
Но их элементы являются частями DOM, как и остальные части страницы, а элементы DOM, представляющие поля формы, поддерживают несколько свойств и событий, которых нет у других элементов. Это делает возможным просматривать и управлять полями ввода из программ JavaScript и добавлять функциональности к классическим формам или использовать формы и поля как основу для построения приложения.
Кнопка с атрибутом type равным submit при нажатии отправляет форму. Нажатие клавиши Enter внутри поля формы имеет тот же эффект.
Отправка формы обычно означает, что браузер переходит на страницу, обозначенную в атрибуте формы action, используя либо GET либо POST запрос. Но перед этим запускается свойство “submit”. Его можно обработать в JavaScript, и обработчик может предотвратить поведение по умолчанию, вызвав на объекте event preventDefault.
Перехват событий “submit” полезен в нескольких случаях. Мы можем написать код, проверяющий допустимость введённых значений и сразу же показать ошибку вместо передачи данных формы. Или мы можем отключить отправку формы по умолчанию и дать программе возможность самой обработать ввод, например используя XMLHttpRequest для отправки данных на сервер без перезагрузки страницы.
Текстовые поля
Свойства текстовых полей selectionStart и selectionEnd содержат данные о положении курсора и выделения текста. Когда ничего не выделено, их значение одинаковое, и равно положению курсора. Например, 0 обозначает начало текста, 10 обозначает, что курсор находится после 10-го символа. Когда выделена часть поля, свойства имеют разные значения, а именно начало и конец выделенного текста. В эти поля также можно записывать значение.
К примеру, представьте, что вы пишете статью про Khasekhemwy, но затрудняетесь писать его имя правильно. Следующий код назначает тегу
Функция replaceSelection заменяет текущий выделенный текст заданным словом, и перемещает курсор на позицию после этого слова, чтобы можно было продолжать печатать.
Событие “change” для текстового поля не срабатывает каждый раз при вводе одного символа. Оно срабатывает после потери полем фокуса, когда его значение было изменено. Чтобы мгновенно реагировать на изменение текстового поля нужно зарегистрировать событие “input”, которое срабатывает каждый раз при вводе символа, удалении текста или других манипуляциях с содержимым поля.
В следующем примере мы видим текстовое поле и счётчик, показывающий текущую длину введённого текста.
Галочки и радиокнопки
Поле галочки – простой бинарный переключатель. Его значение можно извлечь или поменять через свойство checked, содержащее булевскую величину.
Тег используется для связи куска текста с полем ввода. Атрибут for должен совпадать с id поля. Щелчок по метке label включает поле ввода, оно получает фокус и меняет значение – если это галочка или радиокнопка.
Радиокнопка схожа с галочкой, но она связана с другими радиокнопками с тем же именем, так что только одна из них может быть выбрана.
Метод document.getElementsByName выдаёт все элементы с заданным атрибутом name. Пример перебирает их (посредством обычного цикла for, а не forEach, потому что возвращаемая коллекция – не настоящий массив) и регистрирует обработчик событий для каждого элемента. Помните, что у объектов событий есть свойство target, относящееся к элементу, который запустил событие. Это полезно для создания обработчиков событий – наш обработчик может быть вызван разными элементами, и у него должен быть способ получить доступ к текущему элементу, который его вызвал.
Поля select
В большинстве браузеров внешний вид поля будет отличаться от поля с единственным вариантом выбора, которое обычно выглядит как выпадающее меню.
Атрибут size тега = 0
Файловое поле
Файловое поле изначально было предназначено для закачивания файлов с компьютера через форму. В современных браузерах они также позволяют читать файлы из JavaScript. Поле работает как охранник для файлов. Скрипт не может просто взять и открыть файл с компьютера пользователя, но если тот выбрал файл в этом поле, браузер разрешает скрипту начать чтение файла.
Файловое поле обычно выглядит как кнопка с надписью вроде «Выберите файл», с информацией про выбранный файл рядом с ней.
Свойство files элемента – массивоподобный объект (не настоящий массив), содержащий список выбранных файлов. Изначально он пуст. У элемента нет простого свойства file, потому что пользователь может выбрать несколько файлов за раз при включённом атрибуте multiple.
У объектов в свойстве files есть свойства имя (имя файла), размер (размер файла в байтах), и тип (тип файла в смысле media type — text/plain или image/jpeg).
Чего у него нет, так это свойства, содержащего содержимое файла. Чтобы получить содержимое, приходится постараться. Так как чтение файла с диска занимает длительное время, интерфейс должен быть асинхронным, чтобы документ не замирал. Конструктор FileReader можно представлять себе, как конструктор XMLHttpRequest, только для файлов.
Чтение файла происходит при помощи создания объекта FileReader, регистрации обработчика события “load” для него, и вызова его метода readAsText с передачей тому файла. По окончании загрузки в свойстве result сохраняется содержимое файла.
Пример использует Array.prototype.forEach для прохода по массиву, так как в обычном цикле было бы неудобно получать нужные объекты file и reader от обработчика событий. Переменные были бы общими для всех итераций цикла.
Объекты FileReader также инициируют событие “error”, когда чтение файла не получается. Объект error будет сохранён в свойстве error. Если вы не хотите забивать голову ещё одной неудобной асинхронной схемой, вы можете обернуть её в обещание (см. главу 17):
Возможно читать только часть файла, вызывая slice и передавая результат (т.н. объект blob) объекту reader.
Хранение данных на стороне клиента
Простые HTML-странички с добавкой JavaScript могут выступать отличной основой для мини-приложений – небольших вспомогательных программ, автоматизирующих ежедневные дела. Присоединив к полям формы обработчики событий вы можете делать всё – от конвертации фаренгейтов в цельсии до генерации паролей из основного пароля и имени веб-сайта.
Когда такому приложению нужно сохранять информацию между сессиями, переменные JavaScript использовать не получится – их значения выбрасываются каждый раз при закрытии страницы. Можно было бы настроить сервер, подсоединить его к интернету и тогда приложение хранило бы ваши данные там. Это мы разберём в главе 20. Но это добавляет вам работы и сложности. Иногда достаточно хранить данные в своём браузере. Но как?
Можно хранить строковые данные так, что они переживут перезагрузку страниц — для этого надо положить их в объект localStorage. Он разрешает хранить строковые данные под именами (которые тоже являются строками), как в этом примере:
Переменная в localStorage хранится, пока её не перезапишут, удаляется при помощи removeItem или очисткой локального хранилища пользователем.
У сайтов с разных доменов – разные отделения в этом хранилище. То есть, данные, сохранённые с вебсайта в localStorage, могут быть прочтены или перезаписаны только скриптами с этого же сайта.
Также браузеры ограничивают объём хранимых данных, обычно в несколько мегабайт. Это ограничение, вкупе с тем фактом, что забивание жёстких дисков у людей не приносит прибыли, предотвращает отъедание места на диске.
Следующий код реализует простую программу для ведения заметок. Она хранит заметки в виде объекта, ассоциируя заголовки с содержимым. Он кодируется в JSON и хранится в localStorage. Пользователь может выбрать записку через поле новая
Скрипт инициализирует переменную notes значением из localStorage, а если его там нет – простым объектом с одной пустой записью «что купить». Попытка прочесть отсутствующее поле из localStorage вернёт null. Передача null в JSON.parse заставит его проанализировать строку «null» и вернуть null обратно. Поэтому для значения по умолчанию можно использовать оператор ||.
Когда данные в note меняются (добавляется новая запись или меняется текущая), для обновления хранимого поля вызывается функция saveToStorage. Если б мы рассчитывали, что у нас будут храниться тысячи записей, это было бы слишком накладно, и нам пришлось бы придумать более сложную процедуру для хранения – например, своё поле для каждой записи.
Когда пользователь добавляет запись, код должен обновить текстовое поле, хотя у поля и есть обработчик “change”. Это нужно потому, что событие “change” происходит, только когда пользователь меняет значение поля, а не когда это делает скрипт.
Есть ещё один похожий на localStorage объект под названием sessionStorage. Разница между ними в том, что содержимое sessionStorage забывается по окончанию сессии, что для большинства браузеров означает момент закрытия.
HTML предоставляет множество различных типов полей формы – текстовые, галочки, множественного выбора, выбора файла.
Из JavaScript можно получать значение и манипулировать этими полями. По изменению они запускают событие “change”, по вводу с клавиатуры – “input”, и ещё много разных клавиатурных событий. Они помогают нам отловить момент, когда пользователь взаимодействует с полем ввода. Свойства вроде value (для текстовых полей и select) или checked (для галочек и радиокнопок) используются для чтения и записи содержимого полей.
Когда пользователь выбрал файл в своей локальной файловой системе через поле выбора файла, интерфейс FileReader позволит нам добраться до содержимого файла из программы JavaScript.
Объекты localStorage и sessionStorage можно использовать для хранения информации таким способом, который переживёт перезагрузку страницы. Первый сохраняет данные навсегда (ну или пока пользователь специально не сотрёт их), а второй – до закрытия браузера.
Упражнения
Верстак JavaScript
Сделайте интерфейс, позволяющий писать и исполнять кусочки кода JavaScript.
Сделайте кнопку рядом с Поехали
Автодополнение
Дополните текстовое поле так, что при вводе текста под ним появлялся бы список вариантов. У вас есть массив возможных вариантов, и показывать нужно те из них, которые начинаются с вводимого текста. Когда пользователь щёлкает по предложенному варианту, он меняет содержимое поля на него.
Игра «Жизнь» Конвея
Это простая симуляция жизни на прямоугольной решётке, каждый элемент которой живой или нет. Каждое поколение (шаг игры) применяются следующие правила:
— каждая живая клетка, количество живых соседей которой меньше двух или больше трёх, погибает;
— каждая живая клетка, у которой от двух до трёх живых соседей, живёт до следующего хода;
— каждая мёртвая клетка, у которой есть ровно три живых соседа, оживает.
Соседи клетки – это все соседние с ней клетки по горизонтали, вертикали и диагонали, всего 8 штук.
Обратите внимание, что правила применяются ко всей решётке одновременно, а не к каждой из клеток по очереди. То есть, подсчёт количества соседей происходит в один момент перед следующим шагом, и изменения, происходящие на соседних клетках, не влияют на новое состояние клетки.
Javascript работа с формами
Сценарии JavaScript часто применяются для предварительной обработки данных, введенных пользователями в формах. Проверенные данные затем могут предаваться расширениям CGI сервера Web. Кроме того, с помощью форм и сценариев JavaScript можно создавать активные страницы, способные получать от пользователя и обрабатывать произвольную информацию.
В наиболее общем виде оператор
Параметр NAME задает имя формы. Это имя нужно для адресации формы как свойства объекта Document.
С помощью параметра ACTION указывается адрес URL загрузочного файла программы CGI, а также передаваемые расширению параметры. В том случае, когда форма предназначена для передачи данных расширению сервера Web, параметр ACTION является обязательным. Но если данные, введенные в форме, обрабатываются сценарием JavaScript локально и не передаются серверу Web, этот параметр можно опустить.
Параметр METHOD задает метод передачи данных из формы расширению сервера Web и может принимать значения GET или POST. Если данные из полей формы обрабатываются сценарием JavaScript локально, параметр METHOD задавать не нужно.
Параметр ENCTYPE задает тип MIME передаваемых данных и используется очень редко. Если форма предназначена для передачи текстовых данных (как это обычно бывает), этот параметр по умолчанию имеет значение application/x-www-form-urlencoded. В этом случае для передаваемых данных используется так называемая кодировка URL. Тип данных multipart/form-data позволяет передавать как текстовые, так и двоичные данные. При локальной обработке данных сценарием JavaScript параметр ENCTYPE не задается.
Помимо параметров, для формы можно определить обработчик события, связанный с кнопкой типа SUBMIT. Такая кнопка предназначена для посылки данных из заполненной формы расширению сервера Web. Назначив обработчик события, сценарий JavaScript может управлять этим процессом.
Свойства объекта form
Объект form имеет два набора свойств, состав одного из которых является фиксированным, а состав другого зависит от того, какие поля и органы управления определены в форме. Первый набор свойств приведен ниже:
| Свойство | Описание |
| action | Содержит значение параметра ACTION |
| elements | Массив всех элементов (полей и органов управления), определенных в форме |
| encoding | Содержит значение параметра ENCTYPE |
| length | Размер массива elements |
| method | Содержит значение параметра METHOD |
| target | Содержит значение параметра TARGET |
Большинство свойств первого набора просто отражает значения соответствующих параметров оператора
Переключатель checkbox
Переключатели checkbox обычно применяются для выбора каких-либо независимых друг от друга параметров или возможностей. В форме переключатель checkbox создается с помощью оператора с параметром TYPE, равным строке «checkbox»:
Параметр NAME задает имя переключателя. Это имя можно использовать для определения состояния этого переключателя в сценарии JavaScript.
С помощью параметра VALUE вы можете определить строку, которая передается расширению сервера при посылке заполненной формы, если переключатель находится во включенном состоянии. Если этот параметр не указан, то по умолчанию посылается строка «on». Сценарий JavaScript также может получить значение параметра VALUE.
Необязательный параметр CHECKED указывается в том случае, если при начальном отображении формы переключатель должен отображаться во включенном состоянии.
Если для переключателя определен обработчик события, вы можете задать сценарий JavaScript, получающий управление после того как пользователь изменит состояние переключателя.
Свойства объекта checkbox
Объект checkbox имеет несколько свойств, отражающих значения соответствующих параметров оператора :
Методы объекта checkbox
Для объекта checkbox определен один метод click, не имеющий параметров:
При вызове этого метода переключатель устанавливается во включенное состояние.
Переключатель radio
Переключатели типа radio применяются в тех случаях, когда нужно организовать выбор одной из нескольких возможностей. Исходя из этого, в форме обычно располагается несколько таких переключателей. Определение переключателя radio выглядит следующим образом:
Назначение параметров NAME, VALUE и CHECKED переключателя radio такое же как и назначение аналогичных параметров переключателя checkbox. Отличие заключается в том, что все переключатели radio, принадлежащие к одной группе, должны иметь одинаковые имена, определенные параметром NAME. Что же касается переключателей checkbox, то если их несколько, то все они должны называться по-разному. Для того чтобы расширение сервера Web или сценарий JavaScript, обрабатывающие форму, могли узнать, какой же из переключателей radio группы находится во включенном состоянии, все такие переключатели должны иметь различные значения VALUE. Кроме того, только один из переключателей radio может быть определен с параметром CHECKED.
Свойства объекта radio
Объект radio имеет следующие свойства:
Методы объекта radio
Для объекта radio определен метод click, не имеющий параметров:
При вызове этого метода переключатель выбирается для работы.
Пример формы с переключателями
В этом разделе приведен исходный текст документа HTML со сценарием, предназначенным для динамического создания новой страницы при помощи сценария JavaScript. Параметры этой страницы определяются состоянием переключателей типа checkbox и radio, расположенными в этом документе.
Переключатели с зависимой фиксацией группы Text color, расположенные в исходном документе HTML, задают цвет строк при отображении информации в виде списка или цвет названий переключателей при табличном отображении. В нижней части формы находятся две кнопки с надписями Create Page и Reset. Если нажать на первую из этих кнопок, будет вызвана функция JavaScript, которая определит текущее состояние переключателей и сформирует новый документ HTML. Этот документ появится в окне браузера вместо исходного. С помощью кнопки Reset можно установить начальное состояние переключателей. Текст документа HTML со сценарием, выполняющим все описанные выше действия, представлен в листинге 3.2.
Листинг 3.2.
Список select
С помощью оператора
Все параметры оператора необязательные, однако для того чтобы сценарий JavaScript мог работать со списком, необходимо указать по крайней мере параметр NAME, определяющий имя списка.
Параметр SIZE задает размер видимой части списка в строках.
Если указан необязательный параметр MULTIPLE, объект select является списком просмотра, а не списком выбора.
Свойства объекта select
Ниже перечислены свойства объекта select, доступные сценарию JavaScript:
| Свойство | Описание |
| length | Количество элементов (строк) в списке |
| name | Значение параметра NAME |
| options | Массив объектов options, соответствующих элементам массива, заданным при помощи оператора |
| selectedIndex | Номер выбранного элемента или первого элемента среди нескольких выбранных (если указан параметр MULTIPLE и пользователь выбрал в списке несколько элементов) |
| Свойство | Описание |
| defaultSelected | Отражает состояние параметра SELECTED |
| index | Порядковый номер (индекс) элемента списка |
| length | Количество элементов в выбранном объекте |
| name | Значение параметра NAME |
| selected | С помощью свойства selected сценарий JavaScript может выбрать данный элемент |
| selectedIndex | Номер выбранного элемента |
| text | Текст, указанный после оператора |
| value | Значение параметра VALUE |
Методы объекта select
Обработчики событий, связанные с объектом select
Пример сценария, работающего со списком
Помимо списков, в форме есть две кнопки с надписями Complete и Reset. Кнопка Reset возвращает списки в исходное состояние, в котором они находились сразу после отображения документа HTML. Если же сделать щелчок по кнопке Complete, управление получит сценарий JavaScript, который отобразит выбранный цвет и размер на экране в виде диалоговой панели с сообщением.
Листинг 3.3.
Однострочное поле text
Наверное, наиболее часто в формах, размещенных на страницах серверов Web встречаются однострочные поля, предназначенные для ввода и редактирования текста. Для того чтобы встроить такое поле в форму, необходимо использовать оператор с параметром TYPE, равным значению «text»:
Параметр NAME позволяет задать имя поля, необходимое для обращения к свойствам объекта text, соответствующего этому полю.
С помощью параметра VALUE можно записать в поле произвольную текстовую строку. Эта строка будет отображаться сразу после загрузки документа HTML в окно браузера.
Параметр SIZE определяет размер (ширину) текстового поля в символах. Это размер видимой части поля. Он не ограничивает длину строки, которую можно ввести в данном поле.
Свойства объекта text
Сценариям JavaScript доступны три свойства поля редактирования как объекта класса text:
| Свойство | Описание |
| defaultValue | Отражает состояние параметра VALUE |
| name | Значение параметра NAME |
| value | Текущее содержимое поля редактирования |
Сразу после отображения поля редактирования свойства defaultValue и value хранят одинаковые строки. Когда пользователь редактирует текст, все изменения отражаются в свойстве value. Заметим, что изменяя содержимое свойства value, сценарий JavaScript может изменить содержимое поля редактирования.
Методы объекта text
Обработчики событий объекта text
Обработчики событий вызываются в следующих случаях:
| Обработчик | Когда вызывается |
| onFocus | Вызывается, когда поле редактирования получает фокус ввода |
| onBlur | Вызывается, когда поле редактирования теряет фокус ввода |
| onChange | При изменении содержимого поля редактирования |
| onSelect | При выделении содержимого поля редактирования |
Пример (проверка анкеты)
Методику работы с текстовыми полями в сценариях JavaScript рассмотрим на примере документа HTML с формой для ввода анкеты.
Наш сценарий выполняет несложную обработку информации, которая вводится в текстовых полях этой формы. В частности, сценарий преобразует символы фамилии в прописные. Если указать возраст, меньший 18 лет, сценарий сделает его равным нулю. Если после заполнения анкеты нажать кнопку Complete, на экране появится диалоговая панель, отображающая содержимое отдельных полей формы. Кнопка Reset устанавливает поля в исходное состояние.
Листинг 3.4.
Многострочное поле textarea
В тех случаях, когда редактируемый текст должен занимать несколько строк, в форме между операторами располагают многострочное текстовое поле:
Здесь с помощью параметра NAME вы должны указать имя поля. Оно нужно для того чтобы сценарий JavaScript мог обращаться к свойствам и методам этого поля.
Параметры ROWS и COLS определяют видимый размер многострочного поля редактирования, задавая, соответственно, количество строк и столбцов (количество символов, которые могут поместиться в одной строке).
Параметр WRAP задает способ свертки текста и может иметь одно из трех следующих значений:
| Значение | Способ свертки текста |
| off | Свертка выключена, строки отображаются так, как вводятся |
| virtual | Строки сворачиваются только при отображении в окне редактирования, но передаются расширению сервера Web и сценарию JavaScript точно в таком виде, в котором вводятся |
| physical | При свертке в передаваемый текст записываются символы новой строки |
Методы объекта textarea
Обработчики событий объекта textarea
Обработчики событий вызываются в следующих случаях:
| Обработчик | Когда вызывается |
| onFocus | Вызывается, когда поле редактирования получает фокус ввода |
| onBlur | Вызывается, когда поле редактирования теряет фокус ввода |
| onChange | При изменении содержимого поля редактирования |
| onSelect | При выделении содержимого поля редактирования |
Пример сценария, заполняющего поле textarea
Многострочное поле редактирования располагается в формах для того чтобы пользователь мог записать в нем свой отзыв, комментарий, вопрос или аналогичную информацию. При помощи сценария JavaScript нетрудно выполнить предварительное заполнение поля каким-либо текстом.
Например, пусть нужно создать форму, предназначенную для отправления через Internet отзыва о работе некоторой программы. Если включить переключатель «Благодарность», сценарий автоматически запишет в поле редактирования дату и время подготовки отзыва, а также текст положительного отзыва. К этому тексту останется добавить только подпись.
Для того чтобы сообщить изготовителю программы об ошибках, включите переключатель «Проблемы». Сразу после этого сценарий запишет в многострочное поле текст соответствующего сообщения. Этот текст надо будет отредактировать и дополнить, описав, например, внешние проявления обнаруженной ошибки.
Листинг 3.5.
Однострочное поле password
Для ввода такой информации, как пароли, в формах размещают однострочные поля редактирования типа password:
Для поля password можно указать параметры NAME, VALUE и SIZE. Заметим, что это поле не может иметь обработчики событий.
Параметр NAME позволяет задать имя поля, которое необходимо для обращения к свойствам объекта password, соответствующего этому полю.
С помощью параметра VALUE можно записать в поле произвольную текстовую строку.
Параметр SIZE определяет размер (ширину) текстового поля в символах. Это размер видимой части поля. Он не ограничивает длину строки, которую можно ввести в данном поле.
Поле password похоже на поле text, рассмотренное ранее. Главное отличие заключается в том, что символы введенного в этом поле текста заменяются на звездочки.
Свойства объекта password
Сценариям JavaScript доступны три свойства поля редактирования password:
| Свойство | Описание |
| defaultValue | Отражает состояние параметра VALUE |
| name | Значение параметра NAME |
| value | Текущее содержимое поля редактирования |
Так же, как и для поля text, сразу после отображения поля редактирования свойства defaultValue и value хранят одинаковые строки. Когда пользователь редактирует текст, все изменения отражаются в свойстве value. Изменяя содержимое свойства value, сценарий может изменить содержимое поля редактирования типа password.
Методы объекта password
Пример (ввод идентификатора и пароля)
В качестве практического примера применения сценария JavaScript для обработки информации из полей text и password приведем документ HTML, предназначенный для регистрации пользователей.
В форме регистрации новый пользователь должен ввести свой идентификатор, а также задать пароль. В процессе ввода пароля легко допустить ошибку, поэтому обычно в системах регистрации требуется вводить новый пароль два раза. Если оба раза был введен одинаковый пароль, то он становится активным для данного пользователя.
Наш сценарий, обрабатывающий данные из формы, решает две задачи. Во-первых, он преобразует символы идентификатора пользователя в прописные. Во-вторых, сценарий проверяет идентичность паролей, введенных в полях «Пароль» и «Проверка пароля». Если введенные пароли идентичны, то после нажатия на кнопку Complete пользователь увидит на экране диалоговую панель с введенным идентификатором и паролем. Если пароли не совпадают, сценарий предлагает пользователю повторить ввод паролей.