Методы и обработчики событий
Поможем в ✍️ написании учебной работы
Поможем с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой

Объект 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, просмотров: 181.