Input
Текст в полях ввода
Поля ввода (контейнер 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>
Число гипертекстовых ссылок:
document.forms[0].elements[0].value=document.links.length;
до момента обработки формы.
В данном примере первое поле формы - это поле ввода. Используя подстановку, мы назначаем ему значение умолчания, а потом при помощи кнопки изменяем это значение.
Объект text (текстовое поле ввода) характеризуется следующими свойствами, методами и событиями:
Свойства объекта text - это стандартный набор свойств поля формы. В полях ввода можно изменять только значение свойства value.
Обычно при программировании полей ввода решают две типовых задачи: защита поля от ввода со стороны пользователя и реакция на изменение значения поля ввода
.
Защита поля ввода
Для защиты поля от ввода в него символов применяют метод blur() в сочетании с обработчиком события onFocus:
<form>
<input size=10 value="First Value" onFocus="document.forms[1].elements[0].blur();">
<input type=button value=Change onClick="document.forms[1].elements[0].value='Second value';">
<input type=reset value=Reset>
</form>
В этом примере значение поля ввода можно изменить только при нажатии на кнопки "Change" и "Reset". При попытке установить курсор в поле ввода он немедленно оттуда убирается, тем самым значение поля защищено от изменений со стороны пользователя.
начало страницы
Изменение значения поля ввода
Реакция на изменение значения поля ввода обрабатывается посредством программы, указанной в атрибуте onChange:
<form method=post onSubmit="return false;">
<input size=15 maxlength=15 value=kuku onChange="window.alert(document.forms[2].elements[0].value);">
</form>
Если ввести что-либо в расположенное выше поле ввода, а потом нажать на Enter, то появится окно предупреждения с введенным текстом. Если просто установить фокус на поле ввода и нажать Enter, ничего не произойдет. Здесь следует сделать следующий комментарий к такому поведению: во-первых, обработчик onChange вызывается только тогда, когда ввод в поле ввода закончен. Событие не вызывается при каждом нажатии на кнопки клавиатуры при вводе текста в поле. Во-вторых, обработчик события не вызывается при изменении значения атрибута value из JavaScript-программы. В этом можно легко убедиться, нажав на кнопку Change - окно предупреждения не открывается. Но если пользователь введет что-то в поле, а после этого нажмет на Change, то окно появится.
начало страницы
u="u686.25.spylog.com";d=document;nv=navigator;na=nv.appName;p=1; bv=Math.round(parseFloat(nv.appVersion)*100); n=(na.substring(0,2)=="Mi")?0:1;rn=Math.random();z="p="+p+"&rn="+rn;y=""; y+=""; y+="
