Пример сценария, заполняющего поле textarea
Многострочное поле редактирования располагается в формах для того чтобы пользователь мог записать в нем свой отзыв, комментарий, вопрос или аналогичную информацию. При помощи сценария JavaScript нетрудно выполнить предварительное заполнение поля каким-либо текстом.
Например, пусть нам нужно создать форму, предназначенную для отправления через Internet отзыва о работе некоторой программы (рис. 3.11).
Рис. 3.11. Форма для отправки отзыва о работе программы
Если включить переключатель “Благодарность”, сценарий автоматически запишет в поле редактирования дату и время подготовки отзыва, а также текст положительного отзыва. К этому тексту вам останется добавить только подпись.
Для отправки отзыва нажмите кнопку Complete. В результате на экране появится диалоговая панель с текстом положительного отзыва (рис. 3.12).
Рис. 3.12. Диалоговая панель с текстом положительного отзыва
Для того чтобы сообщить изготовителю программы об ошибках, включите переключатель “Проблемы”. Сразу после этого сценарий запишет в многострочное поле текст соответствующего сообщения. Этот текст надо будет отредактировать и дополнить, описав, например, внешние проявления обнаруженной ошибки (рис. 3.13).
Рис. 3.13. Отправка сообщения об ошибке
Нажав кнопку Complete, вы увидите текст сообщения (рис. 3.14).
Рис. 3.14. Полный текст сообщения об ошибке, обнаруженной в программе
Исходный текст документа HTML, в котором определена форма для отправки отзыва, а также обрабатывающий эту форму сценарий JavaScript, представлен в листинге 3.5.
Листинг 3.5. Файл chapter3/textarea/textarea.html
<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="5" COLS="25" WRAP="physical">
</TEXTAREA>
<P><INPUT TYPE="button" VALUE="Complete" onClick="Complete();">
</FORM>
<SCRIPT LANGUAGE="JavaScript">
<!--
init();
// -->
</SCRIPT>
</BODY>
</HTML>
Обратите внимание, что в нашей форме многострочное поле редактирования текста textarea создано пустым:
<TEXTAREA NAME="Comment"
ROWS="5" COLS="25" WRAP="physical">
</TEXTAREA>
Это поле называется “Comment”, имеет пять строк, в которых размещается до 25 символов, и режим свертки текста physical, предполагающий добавление символов новой строки, разделяющих отдельные строки введенного текста.
Как происходит заполнение этого поля?
В самом конце области тела документа HTML, ограниченного операторами <BODY> и </BODY>, мы вставили вызов функции init:
<SCRIPT LANGUAGE="JavaScript">
<!--
init();
// -->
</SCRIPT>
Эта функция вызывается после завершения загрузки тела документа и выполняет начальное заполнение многострочного поля редактирования textarea:
Sel.Comment.value = getDate() + szOK;
Строка, которая записывается в это поле, образуется путем сложения строки текущей даты, полученной от функции getDate (эту функцию мы определили в нашем сценарии), со строкой szOK, содержащей текст положительного отзыва.
Функция getDate определена следующим образом:
function getDate()
{
var szDate = "";
szDate = new Date();
return szDate.toLocaleString() + "\n";
}
В этой функции мы сначала создаем объект класса Data, а затем вызываем для этого объекта метод toLocaleString, возвращающий текстовую строку даты.
В верхней части формы находятся два переключателя с зависимой фиксацией. С помощью этих переключателей пользователь может выбрать вид отзыва (благодарность или сообщение об ошибке):
<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);}"> Проблемы
Оба переключателя относятся к одной группе и потому имеют одинаковое значение параметра NAME. Для первого из них мы дополнительно указали параметр CHECKED, поэтому по умолчанию он находится во включенном состоянии (здесь мы предположили, что количество положительных отзывов будет превышать количество сообщений об ошибках).
Каждый из переключателей имеет обработчик события onClick, определенный следующим образом:
if(this.checked)
{
chkRadio(this.form,this.value);
}
При изменении состояния переключателя вызывается функция chkRadio. Эта функция проверяет имя включенного переключателя и заполняет поле многострочного редактора textarea соответствующим сообщением:
function chkRadio(form,value)
{
if(value == "Thanks")
Sel.Comment.value = getDate() + szOK;
else
Sel.Comment.value = getDate() + szTrouble + szProbList;
}
Функция chkRadio комбинирует тексты сообщений из текущей даты и заранее проинициализированных строк szOK, szTrouble и szProbList.
Теперь о том, как наш сценарий получает текст из поля редактирования и отображает его в диалоговой панели.
Для кнопки Complete мы определили обработчик события onClick:
<INPUT TYPE="button" VALUE="Complete" onClick="Complete();">
Этот обработчик вызывает функцию Complete, отображающую подготовленный отзыв на экране:
function Complete()
{
szMsg = Sel.Comment.value;
alert(szMsg);
}
Здесь текст извлекается из поля textarea как значение свойства value для соответствующего объекта, а затем отображается на экране при помощи встроенной функции alert.
