Книги-online

Text Оглавление | Назад | Вперёд | Индекс

Text

Поле для ввода текста на HTML-форме. Пользователь может ввести в текстовое поле слово, фразу или последовательность цифр или символов.

Клиентский объект

Реализован в

JavaScript 1.0

JavaScript 1.1: добавлено свойство type.

JavaScript 1.2: добавлен метод handleEvent.

Создание

HTML-тэгом INPUT с "text" в качестве значения атрибута TYPE. Для данной формы машина выполнения JavaScript создаёт соответствующие объекты Text и помещает эти объекты в массив elements соответствующего объекта Form. Доступ к Text-объекту Вы получаете по индексу в этом массиве. Можно индексировать числами или, если имеются, значениями атрибутов NAME.

Для определения Text-объекта используется стандартный синтаксис HTML с добавлением обработчиков событий JavaScript.

Обработчики событий

Описание

Text-объект на форме выглядит так:

Text-объект это элемент формы и он обязан быть определён в тэге FORM.

Text-объекты могут быть обновлены (перерисованы) динамически через установку свойства value /(this.value).

Свойства. Резюме.

Свойство	Описание
defaultValue	Отражает атрибут VALUE.
form	Специфицирует форму, содержащую Text-объект.
name	Отражает атрибут NAME.
type	Отражает атрибут TYPE.
value	Отражает текущее значение поля объекта Text.

Методы. Резюме.

Метод	Описание
blur	Убирает фокус с объекта.
focus	Передаёт фокус объекту.
handleEvent	Вызывает обработчик для специфицированного события.
select	Выделяет область ввода объекта.

Кроме того, этот объект наследует методы watch и unwatch из объекта Object.

Примеры

Пример 1. Создаётся Text-объект длиной 25 символов. Текстовое поле расположено сразу справа от слов "Last name:". При загрузке формы текстовое поле очищено.

<B>Last name:</B> <INPUT TYPE="text" NAME="last_name" VALUE="" SIZE=25>

Пример 2. Создаются два Text-объекта на форме. Каждый объект имеет значение по умолчанию. Объект city имеет обработчик onFocus, который выделяет весь текст в поле, когда пользователь переходит в это поле с помощью табуляции. Объект state имеет обработчик onChange, который переводит значение в верхний регистр.

<FORM NAME="form1">
<BR><B>City: </B><INPUT TYPE="text" NAME="city" VALUE="Anchorage"
   SIZE="20" onFocus="this.select()">
<B>State: </B><INPUT TYPE="text" NAME="state" VALUE="AK" SIZE="2"
   onChange="this.value=this.value.toUpperCase()">
</FORM>

См. также примеры для onBlur, onChange, onFocus и onSelect.

См. также

Text, Form, Password, String, Textarea

blur

Убирает фокус с текстового поля.

Метод из	Text
Реализован в	JavaScript 1.0

Синтаксис

blur()

Параметры

Отсутствуют.

Пример

Убирается фокус с текстового элемента userText:

userText.blur()

Предполагается, что текстовый элемент определён так:

<INPUT TYPE="text" NAME="userText">

См. также

Text.focus, Text.select

defaultValue

Строка со значением по умолчанию для объекта Text.

Свойство из	Text
Реализовано в	JavaScript 1.0

Безопасность

JavaScript 1.1. Это свойство разрушено по умолчанию. О разрушении данных см. книгу Клиентский JavaScript. Руководство.

Описание

Начальное значение defaultValue отражает значение атрибута VALUE. Установка defaultValue программно переопределяет начальную установку.

Вы можете установить свойство defaultValue в любое время. Вид соответствующего объекта не обновляется при установке свойства defaultValue, это происходит только при установке свойства value.

Пример

Функция вычисляет свойства defaultValue объекта на форме surfCity и отображает значения в окне msgWindow:

function defaultGetter() {
   msgWindow=window.open("")
   msgWindow.document.write("hidden.defaultValue is " +
      document.surfCity.hiddenObj.defaultValue + "<BR>")
   msgWindow.document.write("password.defaultValue is " +
      document.surfCity.passwordObj.defaultValue + "<BR>")
   msgWindow.document.write("text.defaultValue is " +
      document.surfCity.textObj.defaultValue + "<BR>")
   msgWindow.document.write("textarea.defaultValue is " +
      document.surfCity.textareaObj.defaultValue + "<BR>")
   msgWindow.document.close()
}

См. также

Text.value

focus

Переходит к текстовому полю и передаёт ему фокус.

Метод из	Text
Реализован в	JavaScript 1.0

Синтаксис

focus()

Параметры

Отсутствуют.

Описание

Метод focus используется для перехода к текстовому полю и для передачи ему фокуса ввода. Вы можете затем программно ввести значение в это поле или дать возможность пользователю сделать это. Если этот метод используется без метода select, курсор позиционируется в начале поля.

Примеры

См. примеры для select.

См. также

Text.blur, Text.select

form

Ссылка объекта, специфицирующая форму, содержащую данный объект.

Свойство из	Text
Только для чтения
Реализовано в	JavaScript 1.0

Описание

Каждый элемент формы имеет свойство form, которое является ссылкой на родительскую форму элемента. Это свойство используется в основном в обработчиках событий, когда необходимо обратиться к другому элементу на текущей форме.

Примеры

Пример 1. Форма myForm содержит Text-объект и кнопку. если пользователь щёлкает по кнопке, в Text-объект устанавливается значение имени формы. Обработчик onClick кнопки использует this.form для обращения к текущей форме myForm.

<FORM NAME="myForm">
Form name:<INPUT TYPE="text" NAME="text1" VALUE="Beluga">
<P>
<INPUT NAME="button1" TYPE="button" VALUE="Show Form Name"
   onClick="this.form.text1.value=this.form.name">
</FORM>

Пример 2. Показана форма с несколькими элементами. Если пользователь щёлкает кнопку button2, функция showElements выводит диалог alert, содержащий имена всех элементов формы myForm.

function showElements(theForm) {
   str = "Form Elements of form " + theForm.name + ": \n "
   for (i = 0; i < theForm.length; i++) 
      str += theForm.elements[i].name + "\n"
   alert(str)
}
</script>
<FORM NAME="myForm">
Form name:<INPUT TYPE="text" NAME="text1" VALUE="Beluga">
<P>
<INPUT NAME="button1" TYPE="button" VALUE="Show Form Name"
   onClick="this.form.text1.value=this.form.name">
<INPUT NAME="button2" TYPE="button" VALUE="Show Form Elements"
   onClick="showElements(this.form)">
</FORM>

Диалог alert выведет следующий текст:

JavaScript Alert:
Form Elements of form myForm:
text1
button1
button2

Пример 3. Здесь используется ссылка объекта, а не ключевое слово this, для обращения к форме. Код возвращает ссылку на myForm, которая является формой, содержащей элемент myTextObject.

document.myForm.myTextObject.form

См. также

Form

handleEvent

Вызывает обработчик для специфицированного события.

Метод из	Text
Реализован в	JavaScript 1.2

Синтаксис

handleEvent(event)

Параметр

event

Имя события, для которого специфицированный объект имеет обработчик.

name

Строка, специфицирующая имя данного объекта.

Свойство из	Text
Реализовано в	JavaScript 1.0

Безопасность

JavaScript 1.1. Это свойство разрушено по умолчанию. О разрушении данных см. книгу Клиентский JavaScript. Руководство.

Описание

Свойство name первоначально отражает значение атрибута NAME. Изменение свойства name переопределяет это значение. Свойство name не выводится на экран; оно используется для программного обращения к объекту.

Если несколько объектов на одной форме имеют одинаковые значения своих атрибутов NAME, автоматически создаётся массив с этим именем. Каждый элемент массива представляет отдельный объект Form. Элементы индексируются в порядке расположения в коде, начиная с 0. Например, если два элемента Text и элемент Textarea на одной форме имеют в своих атрибутах NAME значение "myField", создаётся массив из элементов myField[0], myField[1] и myField[2]. Вы должны знать о возможности возникновения такой ситуации в Вашем коде и знать, ссылается myField на единственный элемент или на массив элементов.

Пример

Здесь функция valueGetter использует цикл for для итерации по массиву элементов на форме valueTest. Окно msgWindow выводит имена всех элементов формы:

newWindow=window.open("http://home.netscape.com")

function valueGetter() {
   var msgWindow=window.open("")
   for (var i = 0; i < newWindow.document.valueTest.elements.length; i++) {
      msgWindow.document.write(newWindow.document.valueTest.elements[i].name + "<BR>")
   }
}

select

Выделяет область ввода текстового поля.

Метод из	Text
Реализован в	JavaScript 1.0

Синтаксис

select()

Параметры

Отсутствуют.

Описание

Используйте метод select для выделения области ввода текстового поля. Можно использовать метод select вместе с методом focus для выделения поля и позиционирования в нём курсора. Это даст пользователю возможность быстро заменить весь текст поля.

Пример

Обработчик onClick передаёт фокус текстовому полю и выделяет весь текст :

<FORM NAME="myForm">
<B>Last name: </B><INPUT TYPE="text" NAME="lastName" SIZE=20 VALUE="Pigman">
<BR><B>First name: </B><INPUT TYPE="text" NAME="firstName" SIZE=20 VALUE="Victoria">
<BR><BR>
<INPUT TYPE="button" VALUE="Change last name"
   onClick="this.form.lastName.select();this.form.lastName.focus();">
</FORM>

См. также

Text.blur, Text.focus

type

Для всех Text-объектов это поле будет иметь значение "text". Это свойство специфицирует тип элемента формы.

Свойство из	Text
Только для чтения
Реализовано в	JavaScript 1.1

Пример

Записываются значения свойства type каждого элемента формы.

for (var i = 0; i < document.form1.elements.length; i++) {
   document.writeln("<BR>type is " + document.form1.elements[i].type)
}

value

Строка, отражающая значение атрибута VALUE объекта.

Свойство из	Text
Реализовано в	JavaScript 1.0

Безопасность

JavaScript 1.1. Это свойство разрушено по умолчанию. О разрушении данных см. книгу Клиентский JavaScript. Руководство.

Описание

Свойство value это строка. первоначально отражающая значение атрибута VALUE. Эта строка выводится в текстовом поле. Значение этого свойства изменяется, если пользователь или программа модифицируют это поле.

Вы можете установить свойство value в любое время. Вид Text-объекта обновляется сразу после установки свойства value.

Пример

Следующая функция вычисляет свойства value группы кнопок и отображает их в окне msgWindow:

function valueGetter() {
   var msgWindow=window.open("")
   msgWindow.document.write("submitButton.value is " +
      document.valueTest.submitButton.value + "<BR>")
   msgWindow.document.write("resetButton.value is " +
      document.valueTest.resetButton.value + "<BR>")
   msgWindow.document.write("myText.value is " +
      document.valueTest.myText.value + "<BR>")
   msgWindow.document.close()
}

Пример выведет:

submitButton.value is Query Submit
resetButton.value is Reset
myText.value is Stonefish are dangerous.

Предполагается, что кнопки определены так:

<INPUT TYPE="submit" NAME="submitButton">
<INPUT TYPE="reset" NAME="resetButton">
<INPUT TYPE="text" NAME="myText" VALUE="Stonefish are dangerous.">

См. также

Text.defaultValue Оглавление | Назад | Вперёд | Индекс

Дата последнего обновления: 28 мая 1999 года.
Copyright (c) 1999 Netscape Communications Corporation