Пример сценария, заполняющего поле textarea
Многострочное поле редактирования располагается в формах для того чтобы пользователь мог записать в нем свой отзыв, комментарий, вопрос или аналогичную информацию. При помощи сценария JavaScript нетрудно выполнить предварительное заполнение поля каким-либо текстом.
Например, пусть нужно создать форму, предназначенную для отправления через Internet отзыва о работе некоторой программы. Если включить переключатель "Благодарность", сценарий автоматически запишет в поле редактирования дату и время подготовки отзыва, а также текст положительного отзыва. К этому тексту останется добавить только подпись.
Для того чтобы сообщить изготовителю программы об ошибках, включите переключатель "Проблемы". Сразу после этого сценарий запишет в многострочное поле текст соответствующего сообщения. Этот текст надо будет отредактировать и дополнить, описав, например, внешние проявления обнаруженной ошибки.
Листинг.
<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, рассмотренное ранее. Главное отличие заключается в том, что символы введенного в этом поле текста заменяются на звездочки.
Пример (ввод идентификатора и пароля).
В качестве практического примера применения сценария JavaScript для обработки информации из полей text и password приведем документ HTML, предназначенный для регистрации пользователей.
В форме регистрации новый пользователь должен ввести свой идентификатор, а также задать пароль. В процессе ввода пароля легко допустить ошибку, поэтому обычно в системах регистрации требуется вводить новый пароль два раза. Если оба раза был введен одинаковый пароль, то он становится активным для данного пользователя.
Сценарий, обрабатывающий данные из формы, решает две задачи. Во-первых, он преобразует символы идентификатора пользователя в прописные. Во-вторых, сценарий проверяет идентичность паролей, введенных в полях "Пароль" и "Проверка пароля". Если введенные пароли идентичны, то после нажатия на кнопку Complete пользователь увидит на экране диалоговую панель с введенным идентификатором и паролем. Если пароли не совпадают, сценарий предлагает пользователю повторить ввод паролей.
|
|
|
Листинг.
<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>
Индивидуальные задания
Общее задание: разработать скрипт, использующий форму для ввода исходных данных. Результаты работы скрипта выводятся в окно браузера.
Задания те же, что и в предыдущей лабораторной работе.
Дата добавления: 2018-11-24; просмотров: 85; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!