Главная Обратная связь Поможем написать вашу работу!

Дисциплины:

Архитектура (936)
Биология (6393)
География (744)
История (25)
Компьютеры (1497)
Кулинария (2184)
Культура (3938)
Литература (5778)
Математика (5918)
Медицина (9278)
Механика (2776)
Образование (13883)
Политика (26404)
Правоведение (321)
Психология (56518)
Религия (1833)
Социология (23400)
Спорт (2350)
Строительство (17942)
Технология (5741)
Транспорт (14634)
Физика (1043)
Философия (440)
Финансы (17336)
Химия (4931)
Экология (6055)
Экономика (9200)
Электроника (7621)






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



Обработчики событий вызываются в следующих случаях:

Обработчик Когда вызывается
onFocus Вызывается, когда поле редактирования получает фокус ввода
onBlur Вызывается, когда поле редактирования теряет фокус ввода
onChange При изменении содержимого поля редактирования
onSelect При выделении содержимого поля редактирования

 

Пример сценария, заполняющего поле textarea

Многострочное поле редактирования располагается в формах для того чтобы пользователь мог записать в нем свой отзыв, комментарий, вопрос или аналогичную информацию. При помощи сценария JavaScript нетрудно выполнить предварительное заполнение поля каким-либо текстом.

Например, пусть нужно создать форму, предназначенную для отправления через Internet отзыва о работе некоторой программы. Если включить переключатель "Благодарность", сценарий автоматически запишет в поле редактирования дату и время подготовки отзыва, а также текст положительного отзыва. К этому тексту останется добавить только подпись.

Для того чтобы сообщить изготовителю программы об ошибках, включите переключатель "Проблемы". Сразу после этого сценарий запишет в многострочное поле текст соответствующего сообщения. Этот текст надо будет отредактировать и дополнить, описав, например, внешние проявления обнаруженной ошибки.

Листинг 5.

<HTML> <HEAD> <TITLE>Работа с многострочным текстовым полем</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var szOK = "Спасибо!\nВаша программа работает без ошибок."; var szTrouble = "К сожалению, с вашей программой у нас возникли проблемы."; var szProbList = "\nСерийный номер программы: ХХХХХХ\nДата покупки: ХХ-ХХ-ХХ"; function getDate() { var szDate = ""; szDate = new Date(); return szDate.toLocaleString() + "\n"; } function chkRadio(form,value) { if(value == "Thanks") Sel.Comment.value = getDate() + szOK; else Sel.Comment.value = getDate() + szTrouble + szProbList; } function init() { Sel.Comment.value = getDate() + szOK; } function Complete() { szMsg = Sel.Comment.value; alert(szMsg); } // --> </SCRIPT> </HEAD> <BODY BGCOLOR=white> <H1>Пришлите ваш отзыв</H1> <FORM NAME="Sel"> <P><INPUT TYPE="radio" NAME="TextSelect" CHECKED VALUE="Thanks" onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Благодарность <BR><INPUT TYPE="radio" NAME="TextSelect" VALUE="Trouble" onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Проблемы <P><TEXTAREA NAME="Comment" ROWS="8" COLS="40" WRAP="physical"> </TEXTAREA> <P><INPUT TYPE="button" VALUE="Complete" onClick="Complete();"> </FORM> <SCRIPT LANGUAGE="JavaScript"> <!-- init(); // --> </SCRIPT> </BODY></HTML>

Вопрос: Какая из выше написанных функций не нужна для работы сценария?



Однострочное поле password

Для ввода такой информации, как пароли, в формах размещают однострочные поля редактирования типа password:

<INPUT TYPE="password" NAME="Имя_поля_text" VALUE="Значение" SIZE=Размер_поля>

Для поля password можно указать параметры NAME, VALUE и SIZE. Заметим, что это поле не может иметь обработчики событий.



Параметр NAME позволяет задать имя поля, которое необходимо для обращения к свойствам объекта password, соответствующего этому полю.

С помощью параметра VALUE можно записать в поле произвольную текстовую строку.

Параметр SIZE определяет размер (ширину) текстового поля в символах. Это размер видимой части поля. Он не ограничивает длину строки, которую можно ввести в данном поле.

Поле password похоже на поле text, рассмотренное ранее. Главное отличие заключается в том, что символы введенного в этом поле текста заменяются на звездочки.

Свойства объекта password

Сценариям JavaScript доступны три свойства поля редактирования password:

Свойство Описание
defaultValue Отражает состояние параметра VALUE
name Значение параметра NAME
value Текущее содержимое поля редактирования

 

Так же, как и для поля text, сразу после отображения поля редактирования свойства defaultValue и value хранят одинаковые строки. Когда пользователь редактирует текст, все изменения отражаются в свойстве value. Изменяя содержимое свойства value, сценарий может изменить содержимое поля редактирования типа password.

Методы объекта password

Для объекта password определены методы focus, blur и select, не имеющие параметров. С помощью метода focus сценарий JavaScript может передать фокус полю редактирования, а с помощью метода blur - отобрать фокус у этого поля. Вызов метода select приводит к выделению содержимого поля редактирования.

Пример (ввод идентификатора и пароля)

В качестве практического примера применения сценария JavaScript для обработки информации из полей text и password приведем документ HTML, предназначенный для регистрации пользователей.



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

Наш сценарий, обрабатывающий данные из формы, решает две задачи. Во-первых, он преобразует символы идентификатора пользователя в прописные. Во-вторых, сценарий проверяет идентичность паролей, введенных в полях "Пароль" и "Проверка пароля". Если введенные пароли идентичны, то после нажатия на кнопку Complete пользователь увидит на экране диалоговую панель с введенным идентификатором и паролем. Если пароли не совпадают, сценарий предлагает пользователю повторить ввод паролей.

Листинг 6.

<HTML> <HEAD> <TITLE>Ввод и проверка пароля</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function Complete() { if(Sel.pwd.value != Sel.pwd1.value) alert("Ошибка при вводе пароля\nПопробуйте еще раз"); else { var szId=""; var szPwd=""; szId = Sel.id.value; szPwd = Sel.pwd.value; alert("Регистрация выполнена:\n" + "ID=" + szId + "\nPassword=" + szPwd); } } // --> </SCRIPT> </HEAD> <BODY BGCOLOR=white> <H1>Регистрация</H1> <FORM NAME="Sel"> <TABLE> <TR><TD><B>Идентификатор:</B></TD><TD><INPUT TYPE="text" NAME="id" onChange="this.value=this.value.toUpperCase()" SIZE="20" ></TD></TR> <TR><TD><B>Пароль:</B></TD><TD><INPUT TYPE="password" NAME="pwd" SIZE="20"></TD></TR> <TR><TD><B>Проверка пароля:</B></TD><TD><INPUT TYPE="password" NAME="pwd1" SIZE="20"></TD></TR> </TABLE> <P> <TABLE> <TR><TD><INPUT TYPE="button" VALUE="Complete" onClick="Complete();"></TD> <TD><INPUT TYPE="reset" VALUE="Reset"></TD></TR> </TABLE> </FORM> </BODY></HTML>

 

 


Просмотров 303

Эта страница нарушает авторские права




allrefrs.ru - 2021 год. Все права принадлежат их авторам!