Объект textarea 6.7

Объект textarea
Объект textarea соответствует области текста, определенной в форме. Объекты textarea
являются свойствами объекта form и должны быть помещены в контейнер <form> . . .
</form>. Элементы этого типа используются для ввода нескольких строк текста в
свободном формате. Также его часто используют для вывода примеров текста например
JS-программы, сформированнго текста предлагаемого для размещения например баннера
и др.
Измените этот текст и перейдите в другое поле формы:
Это объект textarea
Пример текста по умолчанию
Тег, задающий область текста, имеет синтаксис:
< textarea name="textareaName"
rows="integer"
cols="integer"
[onBlur="handlerText"]
[onChange="handlerText"]
[onFocus="handlerText"]
[onSelect="handlerText"]>
[textToDisplay]
[wrap="hand | soft"]
</textarea>
Атрибут name определяет имя области текста, и ему соответствует свойство name
объекта textarea. Атрибуты rows и cols задают размеры пля области в симвоолах. Строка
textToDisplay представляет собой необязательный текст, помещенный в область текста
при первом отображении на экране. Эта строка является значением свойства defaultValue
объекта textarea в языке JavaScript. Форматирование в этй строке и происходит обычным
способом, тоесть без тегов <br> и других, а также теги отображаются здесь как они
написаны, тоесть теги в этой строке не работают. Значение атрибута wrap определяет,
каким образом введенный в поле текст разбивается на строки. Так, значение soft задает
отображение строк в области текста полностью. В противном случае текст между двумя
символами конца строки (Enter) размещается в одной строке.
Для обращения к методам и свойствам объекта textarea применяются типичные для
элементов формы выражения:
o
o
o
o
textareaName.propertyName
textareaName.methodName(parameters)
formName.elements[i].propertyName
formName.elements[i].methodName(parameters)
где textareaName - это значение атрибута name тега <textarea>, а formName - имя формы,
в котрой определен объект textarea.
Содержимое объектов textarea в JS-программах может динамически изменяться путем
присваивания нового значения их свойству value. Например:
document.forms[0].myArea.value = "Новый текст"
Свойства
Объекты textarea имеют свойства:
o
o
o
o
defaultValue - значение содержит текст, помещенный в контейнер
<textarea> . . . </textarea>
name - соответствует атрибуту name тега <textarea>
value - соответствует текущему значению объекта textarea т.е. текущему
содержимому области текста;
type - для объекта textarea всегда содержит значение "textarea".
Методы
Метод focus() используется для помещения фокуса ввода в область текста, а метод
blur() - для его удаления из области текста. Метод select() применяется для выделения
информации в области текста. Очень удобный метод, когда нужно выделить большой по
объему текст.
Обработчики событий
В теге <textarea> можно определить четыре атрибута, задающие обработку событий,
связанных с объектом textarea. С помощью атрибута onBlur определяется реакция
объекта на удаление фокуса ввода из области текста, а с помощью атрибута onChange реакция объекта на изменение содержимого области текста. Атрибуты onFocus и onSelect
активизируют обработку событий, связанных соответственно с получением фокуса ввода
и с выделением данных в области текста.
Пример
Разберем пример. Выше приведена его действующая модель:
<script language = "JavaScript">
<!-function sCange() {
alert ("Содержимое текстовой области изменено");
}
//-->
</script>
<form>
Измените этот текст и перейдите в другое поле формы:<BR>
<textarea name="tarea" rews=5 cols=40 onChange="sCange()">
Это объект textarea
Пример текста по умолчанию
</textarea>
<P>
<input type="text" size=35 name="stxt">
</form>
Здесь содержится два поля. Первое поле является областью текста (textarea). При
изменении содержимого текстовой области активизируется функция sCange(), которая
выводит окно сообщения, информирующее о том, что текст изменялся. Второе поле
является обычным полем ввода, я его разместил для того, чтобы было куда переместить
фокус.
На этом закончим рассмотрение объектов соответствующих тегам HTML.
< Учебник JavaScript, глава 5
|
Учебник JavaScript, глава 7 >