Поля ввода (контейнер INPUT типа TEXT) являются одним из наиболее популярных объектов программирования на JavaScript. Это объясняется тем, что помимо использования по прямому назначению их применяют и в целях отладки программ, выводя в эти поля промежуточные значения переменных и свойств объектов:
В данном примере первое поле формы - это поле ввода. Используя подстановку, мы назначаем ему значение умолчания, а потом при помощи кнопки изменяем это значение.
Объект text (текстовое поле ввода) характеризуется следующими свойствами, методами и событиями:
Свойства | Методы | События |
---|---|---|
|
|
|
Свойства объекта text - это стандартный набор свойств поля формы. В полях ввода можно изменять только значение свойства value.
Обычно при программировании полей ввода решают две типовых задачи: защита поля от ввода со стороны пользователя и реакция на изменение значения поля ввода .
Защита поля ввода
Для защиты поля от ввода в него символов применяют метод blur() в сочетании с обработчиком события onFocus:
В этом примере значение поля ввода можно изменить только при нажатии на кнопки "Change" и "Reset". При попытке установить курсор в поле ввода он немедленно оттуда убирается, тем самым значение поля защищено от изменений со стороны пользователя.
Изменение значения поля ввода
Реакция на изменение значения поля ввода обрабатывается посредством программы, указанной в атрибуте onChange:
Если ввести что-либо в расположенное выше поле ввода, а потом нажать на Enter, то появится окно предупреждения с введенным текстом. Если просто установить фокус на поле ввода и нажать Enter, ничего не произойдет. Здесь следует сделать следующий комментарий к такому поведению: во-первых, обработчик onChange вызывается только тогда, когда ввод в поле ввода закончен. Событие не вызывается при каждом нажатии на кнопки клавиатуры при вводе текста в поле. Во-вторых, обработчик события не вызывается при изменении значения атрибута value из JavaScript-программы. В этом можно легко убедиться, нажав на кнопку Change - окно предупреждения не открывается. Но если пользователь введет что-то в поле, а после этого нажмет на Change, то окно появится.