КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Листинг 3.4. Файл chapter3/text/text. html
|
|
|
|
<HTML>
<HEAD>
<Т1ТLЕ>Робота з текстовими полями</Т1ТLЕ>
<SCRIPT LANGUAGE="JavaScript">
<!--
function Complete()
{
var szElement="";
szЕ1еmеnt="Прізвище: " + Sel.family.value + "\nИмя: " + Sel.Name.value + "\nТелефон: " + Sel.PhoneNumber.value + "\nВозраст: " + Sel.Age.value;
alert(szElement);
}
function CheckAge(age)
{
if(age < 18)
else
return age;
}
//-->
</SCRIPT>
</НЕАD>
<body BGCOLOR=white>
<H1>3аполните анкету</Н1>
<FORM NAME="Sel">
<TABLE>
<ТR><ТD><У>Прізвище:</У></ТD><ТD><INРUТ TYPE="text"
NAME="family"
onChange="this.value=this.value.toUpperCase()"
SIZE="20"></TD></TR>
<ТR><ТD><У>Ім'я:</У></ТD><ТD><INРUТ TYPE="text"
NAME="Name" SIZE="20"></TD></TR>
<ТR><ТD><У>Телефон:</У></ТD><ТD><INРUТ TYPE="text"
NAME="PhoneNumber" SIZE="10"></TD></TR>
<TR><TD><B>Boзpacт:</B></TD><TD><INPUT TYPE="text"
NAME="Age" VALUE="18" SIZE="4"
onChange="this.value=CheckAge(this.value)"
onFocus="this.select()"></TD></TR>
<P>
<TABLE>
<TR><TD><INPUT TYPE="button" VALUE="Complete"
onClick="Complete();"></TD>
<TD><INPUT TYPE="reset" VALUE="Reset"></TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Для перетворення символів прізвища в прописні для поля family визначений оброблювач події onChange:
onChange="this. value=this. value. toUpperCase()"
Після внесення змін у вміст поля цей оброблювач викликає метод toUpperCase, визначений у класі рядків. Перетворене значення записується знову у властивість this. value.
Поле Age має два оброблювачі для подій: onChange і onFocus:
onChange="this. value=CheckAge(this. value)"
onFocus="this. select()"
Перший із цих оброблювачів викликає функцію перевірки віку CheckAge, передаючи їй значення з поля Age. Повернуте цією функцією значення знову записується в те ж саме поле.
|
|
|
Функція CheckAge виглядає дуже просто:
function CheckAge(age)
{
if(age < 18)
return "0";
else
return age;
}
Якщо їй передається рядок, що містить число, менше 18, вона повертає нульове значення. У тому випадку, коли число більше 18 або коли в цьому полі знаходиться нечисловое значення, функція CheckAge повертає переданий їй рядок без змін.
Оброблювач події onFocus викликає метод select, що виділяє вміст поля редагування. Дія цього оброблювача можна побачити, нажимая клавішу табуляции доти, поки фокус запровадження не буде переданий полю Age.
Кнопку Complete користувач натискає після заповнення анкети. Для неї визначений оброблювач події onClick:
<INPUT TYPE="button" VALUE="Complete"
onClick="Complete();">
Цей оброблювач викликає функцію з ім'ям Complete, у задачу якої входить відображення вмісту поляж форми. Вихідний текст функції Complete приведений нижче:
function Complete()
{
var szElement="";
szElement="Фaмилия: " + Sel.family.value + "\nИмя: " + Sel.Name.value + "\nТелефон: " + Sel.PhoneNumber.value + "\nВозраст: " + Sel.Age.value;
alert(szElement);
}
Варто звернути увагу на те, як адресуються властивості полів форми вказівкою імені форми, імен полів і імені властивості value.
3.3.9. Многострочное поле textarea
У тих випадках, коли що редагується текст повинний займати декілька рядків, у формі між операторами <TEXTAREA> і </TEXTAREA> розташовують многострочное текстове поле:
<TЕХТАRЕА
NAМЕ="Ім'я_поля_tехtагеа"
ROWS="Кількість_рядків"
СОLS="Кількість_стовпчиків"
WRAP="Режим_пакунки_тексту"
onBlur="Оброблювач_події"
onСhаngе="Оброблювач_події"
onFocus="Оброблювач_події"
onSelect="Оброблювач_події">
...
Відображуваний текст
…
</TEXTAREA>
Тут за допомогою параметра NAME треба зазначити ім'я поля. Воно потрібно для того, щоб сценарій JavaScript міг обертатися до властивостей і методів цього поля.
Параметри ROWS і COLS визначають видимий розмір многострочного поля редагування, задаючи відповідно кількість рядків і стовпчиків (кількість символів, що можуть поміститися в однім рядку).
|
|
|
Параметр WRAP задає засіб пакунки тексту і може мати одне з трьох таких значень:
Значення Засіб пакунки тексту
off Свертка виключена, рядки відображаються так, як уводяться
virtual Рядки сворачиваются тільки при відображенні у вікні редагування, але передаються розширенню серверу Web і сценарію JavaScript точно в такому виді, у якому вводяться
physical При пакунку в переданий текст записуються символи нового рядка
Методи об'єкта textarea
Для об'єкта textarea визначені такі ж методи, що і для об'єкта text. Це методи focus, blur і select, що не мають параметрів.
За допомогою методу focus сценарій JavaScript може передати фокус полю редагування, а за допомогою методу blur - відібрати фокус у цього поля.
Виклик методу select призводить до виділення вмісту многострочного поля редагування.
Оброблювачі подій об'єкта textarea
Оброблювачі подій визиваються в таких випадках:
Оброблювач Коли визивається
onFocus Поле редагування одержує фокус запровадження
onBlur Поле редагування утрачає фокус запровадження
onChange Змінюється вміст поля редагування
onSelect Виділяється вміст поля редагування
3.3.10. Приклад сценарію, що заповнює поле textarea
Многострочное поле редагування розташовується у формах для того щоб користувач міг записати в ньому своє відкликання, коментар, питання або аналогічну інформацію. За допомогою сценарію JavaScript неважко виконати попереднє заповнення поля яким-небудь текстом. Наприклад, нехай потрібно створити форму, призначену для відправлення через Internet відкликання про роботу деякої програми.
Якщо включити перемикач "Подяка", сценарій автоматично запише в поле редагування дату і час підготування відкликання, а також текст позитивного відкликання. До цього тексту вам залишиться додати тільки підпис.
Для відправлення відкликання натисніть кнопку Complete. У результаті на екрані з'явиться діалогова панель із текстом позитивного відкликання.
Для того щоб повідомити виготовлювачу програми про помилки, варто включити перемикач "Проблеми". Відразу після цього сценарій запише в многострочное поле текст відповідного повідомлення. Цей текст треба будет відредагувати і доповнити, описав, наприклад, зовнішні прояви виявленої помилки.
|
|
|
Натискання кнопки Complete дозволить побачити текст повідомлення.
Вихідний текст документа HTML, у якому визначена форма для відправлення відкликання, а також обробну цю форму сценарій JavaScript подані в листинге 3.5.
|
|
|
|
|
Дата добавления: 2014-11-29; Просмотров: 340; Нарушение авторских прав?; Мы поможем в написании вашей работы!