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

Textarea

Поле многострочного ввода текста на HTML-форме. Можно вводить слова, фразы или числа.

Создание

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

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

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

• onBlur
• onChange
• onFocus
• onKeyDown
• onKeyPress
• onKeyUp
• onSelect

Описание

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

Объект Textarea это элемент формы, который обязан быть определён в тэге FORM.

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

Для перехода на новую строку в Textarea-объекте Вы можете использовать символ новой строки. Хотя этот символ отличается для разных платформ (на Unix это \n, на Windows это \r, на Macintosh это \n), JavaScript проверяет все символы новой строки перед установкой строки-значения свойства и трансляцией его для конкретной платформы. Можно вводить символы новой строки программно -- один из способов это проверить свойство navigator.appVersion для определения текущей платформы, затем установить соответствующий символ новой строки. См. примеры в navigator.appVersion.

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

defaultValue

form

name

type

value

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

blur

focus

handleEvent

select

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

Примеры

Пример 1. Создаётся объект Textarea размером 6 рядов на 55 столбцов. Поле textarea расположено ниже слова "Description:". Когда форма загружается, Textarea-объект содержит несколько строк данных, включая одну пустую строку.

<B>Description:</B>
<BR><TEXTAREA NAME="item_description" ROWS=6 COLS=55>
Our storage ottoman provides an attractive way to
store lots of CDs and videos--and it's versatile
enough to store other things as well.

It can hold up to 72 CDs under the lid and 20 videos
in the drawer below.
</TEXTAREA>

Пример 2. Сроковая переменная содержит символы новой строки для различных платформ. Если пользователь щёлкает кнопку, Textarea-объект заполняется значением из строковой переменной. В результате получаются три строки текста в Textarea-объекте.

<SCRIPT>
myString="This is line one.\nThis is line two.\rThis is line three."
</SCRIPT>
<FORM NAME="form1">
<INPUT TYPE="button" Value="Populate the textarea"
onClick="document.form1.textarea1.value=myString">
   <P>
<TEXTAREA NAME="textarea1" ROWS=6 COLS=55></TEXTAREA>

См. также

blur

Убирает фокус с объекта.

Синтаксис

blur()

Параметры

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

Пример

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

userText.blur()

Предполагается что textarea определён так:

<TEXTAREA NAME="userText">
Initial text for the text area.
</TEXTAREA>

См. также

defaultValue

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

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

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

Описание

Начальное значение defaultValue отражает значение, специфицированное между начальным и конечным тэгами TEXTAREA. Установка свойства 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()
}

См. также

focus

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

Синтаксис

focus()

Параметры

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

Описание

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

Примеры

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

См. также

form

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

Описание

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

Примеры

Пример 1. Здесь показана форма с несколькими элементами. Если пользователь щёлкает кнопку 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="textarea" 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

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

document.myForm.myTextareaObject.form

См. также

handleEvent

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

Синтаксис

handleEvent(event)

Параметр

event

Описание

Об обработке событий см. книгу Клиентский JavaScript. Руководство.

name

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

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

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

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

Синтаксис

select()

Параметры

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

Описание

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

Пример

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

<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><B>Описание:</B>
<BR><TEXTAREA NAME="desc" ROWS=3 COLS=40>An avid scuba diver.</TEXTAREA>
<BR><BR>
<INPUT TYPE="button" VALUE="Change description"
   onClick="this.form.desc.select();this.form.desc.focus();">
</FORM>

См. также

type

Для всех объектов Textarea свойство type имеет значение "textarea". Это свойство специфицирует тип элемента формы.

Пример

Записываются значения свойства type всех элементов формы:

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

value

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

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

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

Описание

Эта строка отображается в поле textarea. Значение этого свойства изменяется, если пользователь программы изменяет текст поля.

Вы можете установить свойство value в любое время. Вид Textarea-объекта обновляется сразу после установки Вами значения свойства 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("blurb.value is " +
      document.valueTest.blurb.value + "<BR>")
   msgWindow.document.close()
}

Будет выведено:

submitButton.value is Query Submit
resetButton.value is Reset
blurb.value is Tropical waters contain all sorts of cool fish, 
such as the harlequin ghost pipefish, dragonet, and cuttlefish.
A cuttlefish looks much like a football wearing a tutu and a mop.

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

<INPUT TYPE="submit" NAME="submitButton">
<INPUT TYPE="reset" NAME="resetButton">
<TEXTAREA NAME="blurb" rows=3 cols=60>
Tropical waters contain all sorts of cool fish, 
such as the harlequin ghost pipefish, dragonet, and cuttlefish.
A cuttlefish looks much like a football wearing a tutu and a mop.
</TEXTAREA>

См. также

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

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