Wiki-учебник по веб-технологиям: JavaScript/ТекстВПоляхВвода ...

Главная | Каталог |

Текст в полях ввода

Оглавление документа
1. Защита поля ввода
2. Изменение значения поля ввода


Поля ввода (контейнер INPUT типа TEXT) являются одним из наиболее популярных объектов программирования на JavaScript. Это объясняется тем, что, помимо использования по прямому назначению, их применяют и в целях отладки программ, вводя в эти поля промежуточные значения переменных и свойств объектов.

<FORM>Число гипертекстовых ссылок:
<INPUT SIZE=10 MAXLENGHT=10 VALUE="&{document.links.length};"> до момента обработки формы.
<INPUT TYPE=button VALUE="Число всех гипертекстовых ссылок в документе"
onClick="window.document.forms[0].elements[0].value=document.links.length;">
<INPUT TYPE=reset VALUE="Установить по умолчанию">
</FORM>


Пример 15.4.

В данном примере первое поле формы — это поле ввода. Используя подстановку, мы присваиваем ему значение по умолчанию, а потом при помощи кнопки изменяем это значение.

Объект Text (текстовое поле ввода) характеризуется следующими свойствами, методами и событиями:

Свойства Методы События
defaultValue blur() onBlur
form focus() onChange
name select() onFocus
type
value

Свойства объекта Text — это стандартный набор свойств поля формы. В полях ввода можно изменять только значение свойства value.

Обычно при программировании полей ввода решают две типовых задачи: защита поля от ввода данных пользователем и реакция на изменение значения поля ввода.

1. Защита поля ввода


Для защиты поля от ввода в него символов применяют метод blur() в сочетании с обработчиком события onFocus:

<FORM>
<INPUT SIZE=10 VALUE="1-е значение"
onFocus="document.forms[0].elements[0].blur();">
<INPUT TYPE=button VALUE=Change
onClick="document.forms[0].elements[0].value= '2-е значение';">
<INPUT TYPE=reset VALUE=Reset>
</FORM>


В этом примере значение поля ввода можно изменить, только нажав на кнопки Change и Reset. При попытке установить курсор в поле ввода он немедленно оттуда убирается, и таким образом, значение поля не может быть изменено пользователем.

2. Изменение значения поля ввода


Реакция на изменение значения поля ввода обрабатывается посредством программы, указанной в атрибуте onChange:

<FORM METHOD="post" onSubmit="return false;">
<INPUT SIZE="15" MAXLENGHT="15" VALUE="Тест"
onChange="window.alert(document.forms[0].elements[0].value);">
<INPUT TYPE="button" VALUE="Изменить"
onClick="document.forms[0].elements[0].value='Change';">
</FORM>


Если установить фокус на поле ввода и нажать Enter, ничего не произойдет. Если ввести что-либо в расположенное выше поле ввода, а потом нажать на Enter, то появится окно предупреждения с введенным текстом (для Netscape Navigator) или ничего не произойдет (для Internet Explorer последних версий). Если вы используете Internet Explorer последних версий, то окно предупреждения появится только после установки фокуса вне поля ввода. Это следует прокомментировать следующим образом: во-первых, обработчик onChange вызывается только тогда, когда ввод в поле закончен. Событие не вызывается при каждом нажатии на кнопки клавиатуры при вводе текста в поле. Во-вторых, обработчик события не вызывается при изменении значения атрибута VALUE из JavaScript-программы. В этом можно убедиться, нажав на кнопку Change – окно предупреждения не открывается. Но если ввести что-то в поле, а после этого нажать на Change, окно появится.

Отметим, что он работает по-разному для Internet Explorer и Netscape Navigator, а именно по-разному обрабатывается событие onChange. Для Internet Explorer при любом изменении поля событие обрабатывается незамедлительно, для Netscape Navigator — после потери фокуса активным полем.

 
Версия для печати | Поиск: