[Содержание] [Предыдущая] [Следующая] [Индекс]

Text

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

Объект client-side
Реализовано в Navigator 2.0
Navigator 3.0: добавлено свойство type.
Navigator 4.0: добавлен метод 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
Выбирает область ввода объекта.

Примеры

Пример 1. Следующий пример создает объект Text в 25 символов в длину. Текстовое поле появляется немедленно справа от "Фамилия:". Текстовое поле пусто, когда форма загружается.

<B>Фамилия:</B> <INPUT TYPE="text" NAME="last_name" VALUE="" SIZE=25>
Пример 2. Следующий пример создает два объекта Text в форме. Каждый объект имеет значение по умолчанию. Объект city имеет обработчик события onFocus, который выбирает весь текст в поле, когда пользователь переходит к этому полю. Объект state имеет обработчик события onChange, который переводит значение в верхний регистр.

<FORM NAME="form1">
<BR><B>Город: </B><INPUT TYPE="text" NAME="city" VALUE="Anchorage"
   SIZE="20" onFocus="this.select()">
<B>Государство: </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

Свойства

defaultValue

Строка, указывающая значение по умолчанию объекта Text.

Свойство объекта Text
Реализовано в Navigator 2.0

Защита

Navigator 3.0: Это свойство заражено по умолчанию. Для информации о заражении данных, смотрите "Защита JavaScript".

Описание

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

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

Примеры

Следующая функция определяет свойство defaultValue объектов в форме surfCity и показывает значения в окне msgWindow:

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

Смотрите также

Text.value

form

Объектная ссылка, определяющая форму, содержащую этот объект.

Свойство объекта Text
Только для чтения
Реализовано в Navigator 2.0

Описание

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

Примеры

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

<FORM NAME="myForm">
Имя формы:<INPUT TYPE="text" NAME="text1" VALUE="Beluga">
<P>
<INPUT NAME="button1" TYPE="button" VALUE="Показать Имя Формы"
   onClick="this.form.text1.value=this.form.name">
</FORM>
Пример 2. Следующий пример показывает форму с несколькими элементами. Когда пользователь нажимает button2, функция showElements показывает предупреждающее диалоговое окно, содержащее имена каждого элемента в форме myForm.

function showElements(theForm) {
   str = "Элементы формы " + theForm.name + ": \n "
   for (i = 0; i < theForm.length; i++)
      str += theForm.elements[i].name + "\n"
   alert(str)
}
</script>
<FORM NAME="myForm">
Имя формы:<INPUT TYPE="text" NAME="text1" VALUE="Beluga">
<P>
<INPUT NAME="button1" TYPE="button" VALUE="Показать Имя Формы"
   onClick="this.form.text1.value=this.form.name">
<INPUT NAME="button2" TYPE="button" VALUE="Показать Элементы Формы"
   onClick="showElements(this.form)">
</FORM>
Предупреждающее диалоговое окно показывает следующий текст:

JavaScript Alert:
Элементы формы myForm:
text1
button1
button2
Пример 3. Следующий пример использует объектную ссылку, скорее чем ключевое слово this, чтобы обратиться к форме. Код возвращает ссылку на объект myForm, который является формой myTextObject.

document.myForm.myTextObject.form

Смотрите также

Form

name

Строка, определяющая имя этого объекта.

Свойство объекта Text
Реализовано в Navigator 2.0

Защита

Navigator 3.0: Это свойство заражено по умолчанию. Для информации о заражении данных, смотрите "Защита 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>")
   }
}

type

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

Свойство объекта Text
Только для чтения
Реализовано в Navigator 3.0

Примеры

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

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

value

Строка, которая отражает аттрибут VALUE объекта.

Свойство объекта Text
Реализовано в Navigator 2.0

Защита

Navigator 3.0: Это свойство заражено по умолчанию. Для информации о заражении данных, смотрите "Защита JavaScript".

Описание

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

Вы можете устанавливать свойство value в любое время. Отображение объекта Text модифицируется немедленно, когда Вы устанавливаете свойство value.

Примеры

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

function valueGetter() {
   var msgWindow=window.open("")
   msgWindow.document.write("submitButton.value равно " +
      document.valueTest.submitButton.value + "<BR>")
   msgWindow.document.write("resetButton.value равно " +
      document.valueTest.resetButton.value + "<BR>")
   msgWindow.document.write("myText.value равно " +
      document.valueTest.myText.value + "<BR>")
   msgWindow.document.close()
}
Этот пример показывает следующее:

submitButton.value равно Query Submit
resetButton.value равно Reset
myText.value равно Stonefish are dangerous.
Предыдущий пример принимает, что кнопки были определены следующим образом:

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

Смотрите также

Text.defaultValue

Методы

blur

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

Метод объекта Text
Реализовано в Navigator 2.0

Синтаксис

blur()

Параметры

Нет.

Примеры

Следующий пример удаляет фокус из текстового элемента userText:

userText.blur()
Этот пример принимает, что текстовый элемент определен как

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

Смотрите также

Text.focus, Text.select

focus

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

Метод объекта Text
Реализовано в Navigator 2.0

Синтаксис

focus()

Параметры

Нет.

Описание

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

Пример

Смотрите пример для select.

Смотрите также

Text.blur, Text.select

handleEvent

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

Метод объекта Text
Реализовано в Navigator 4.0

Синтаксис

handleEvent(event)

Параметры

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

select

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

Метод объекта Text
Реализовано в Navigator 2.0

Синтаксис

select()

Параметры

Нет.

Описание

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

Пример

Следующий пример использует обработчик события onClick, чтобы переместить фокус в текстовое поле и выбрать это поле для изменения:

<FORM NAME="myForm">
<B>Фамилия: </B><INPUT TYPE="text" NAME="lastName" SIZE=20 VALUE="Pigman">
<BR><B>Имя: </B><INPUT TYPE="text" NAME="firstName" SIZE=20 VALUE="Victoria">
<BR><BR>
<INPUT TYPE="button" VALUE="Изменить фамилию"
   onClick="this.form.lastName.select();this.form.lastName.focus();">
</FORM>

Смотрите также

Text.blur, Text.focus


[Содержание] [Предыдущая] [Следующая] [Индекс]

Последняя Модификация: 10/31/97 12:32:00


Права © 1997 Netscape Communications Corporation



Все мессаги сюда:yanich@inbox.ru
Hosted by uCoz