Объект text имеет три метода: focus(), blur() и select(). Для объектов text можно определить четыре обработчика событий: onBlur, onChange, onFocus и onSelect. Более подробно мы будем рассматривать обработчики событий позже отдельно, а сейчас пока будем пользоваться в примерах без лишних комментариев. Назначение некоторых ясно из их названия.
Пример
Рассмотрим пример приведенный выше:
<form>
<B>Пример:</B>
<input type="text"
name="exeName"
value="Это поле ввода"
size=20
onFocus="this.select()">
</form>
В данном примере обработчик события, связанного с получением фокуса ввода, onFocus применяется для выделения текста в поле ввода. Для самого выделения используется метод select(), а обращение к полю ввода осуществляется при помощи оператора this.
Объект 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 textareaName.propertyName
o textareaName.methodName(parameters)
o formName.elements[i].propertyName
o formName.elements[i].methodName(parameters)
где textareaName - это значение атрибута name тега <textarea>, а formName - имя формы, в которой определен объект textarea.
Содержимое объектов textarea в JS-программах может динамически изменяться путем присваивания нового значения их свойству value. Например:
document.forms[0].myArea.value = "Новый текст"
Свойства
Объекты textarea имеют свойства:
o defaultValue - значение содержит текст, помещенный в контейнер <textarea> . . . </textarea>
o name - соответствует атрибуту name тега <textarea>
o value - соответствует текущему значению объекта textarea т.е. текущему содержимому области текста;
o 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(), которая выводит окно сообщения, информирующее о том, что текст изменялся. Второе поле является обычным полем ввода, я его разместил для того, чтобы было куда переместить фокус.
Дата: 2019-02-25, просмотров: 218.