7.3 Страница, управляемая с клавиатуры. Создание сайтов (самоучитель)
7.3 Страница, управляемая с клавиатуры
А теперь давайте рассмотрим, как можно обрабатывать еще некоторые события, которые могут возникать при просмотре веб-страниц. Если в прошлом разделе мы в основном занимались обработкой событий мыши, то сейчас займемся событиями, связанными с клавиатурой.
Действительно, в некоторых случаях бывает удобно использовать клавиатуру, например, для навигации по странице. В качестве примера давайте немного усовершенствуем словарь терминов. Не правда ли, логично было бы, если бы пользователь мог перейти к соответствующей букве алфавита, просто нажав клавишу с ее символом на клавиатуре?
Реакция на нажатие клавиши Давайте попробуем реализовать эту возможность. Для начала назначим элементу <body> обработчик событий, реагирующий на нажатие клавиш. Он называется onKeyPress:
<BODY onKeyPress=press()>
Теперь давайте напишем саму функцию press(), которая будет вызываться при нажатии какой-либо клавиши. Поскольку у нас в примере букв всего шесть (от А до Е), то пусть нажатие на эти клавиши будет перемещать нашу страницу к соответствующей букве. Нажатие на любую другую клавишу можно обработать как перемещение в начало файла.
Обратите внимание на то, что для организации доступа к каждой букве (и к началу файла) нам не придется прикладывать никаких дополнительных усилий! Ведь мы уже ранее создали соответствующие якоря с помощью тега <А>, и хотя они и не имеют атрибута ID=, у них есть атрибут NAME=, который тоже можно использовать для доступа к элементам.
Итак, при нажатии на клавишу нужно проверить, какая буква была нажата. Это можно сделать, прочитав значение свойства window event keyCode. Оно равно ASCIIJ-коду нажатой клавиши. Например, если нажата клавиша с русской буквой а, то значение свойства window event keyCode равно 1072, т.е. коду этой буквы.
Таким образом, мы можем использовать оператор switch, чтобы назначить различные действия в зависимости от кода нажатой клавиши: switch(window.event.keyCode){case 1072: //какие-то действия case 1073: // какие-то действия и т.д.
Чтобы прокрутить страницу к заданному элементу, можно воспользоваться методом scrolllntoView( ). Например, если мы напишем document.all.BukvaA.scrolllntoView(); то в результате страница будет прокручена так, что якорь BukvaA окажется в верхней части окна браузера.
Учет раскладки клавиатуры
Теперь надо подумать еще о том, что пользователь может забыть переключиться на русскую раскладку клавиатуры. Давайте не будем заставлять его это делать. Поскольку мы знаем, что на 1 клавише с русской буквой а расположена буква f, на 1 клавише с б - знак < и т.д., мы можем осуществить проверку не только кодов букв а, б, в, г, д, е, но и кодов символов f, <, d, u, I, t. Можно написать, например, так: case 1072: case 102: document.all.BukvaA.scrolllntoViewO; break; case 1073: case 44: document.all.BukvaB.scrollIntoView(); break;
В этом случае прокрутка к букве а осуществится, даже если пользователь нажмет клавишу с буквой а или f, забыв переключиться на русскую раскладку клавиатуры. Аналогично можно осуществить прокрутку и к друим буквам. Чтобы при нажатии какой-нибудь иной клавиши вернуться началу файла, можно присвоить это возвращение случаю "default": default":document.all.Top.scrollIntoView(); break;
Вот, собственно говоря, и все. Но чтобы изучить еще некоторые обработчики событий, давайте добавим еще эффект уменьшения яркости текста во время нажатия клавиши. Так обращают внимание пользователя на то, что "что-то происходит" (а именно: прокрутка). Для этого нужно использо-вать обработчики событий, реагирующие раздельно на нажатие и на отпускание клавиши. Они называются, соответственно: onKeyDown и onKeyUp:
<BODY onKeyPress=press() onKeyDown="this.style.color='gray'" onKeyUp="this style.color='black'>
Теперь во время нажатия на клавишу цвет текста изменится на серый, а после отпускания клавиши - обратно на черный. Как видите, ничего сложного.
Подсказка для читателя
И в качестве последнего штриха давайте добавим подсказку для пользователя. Пусть, когда он начнет прокручивать страницу вручную (с помощью полосы прокрутки), в строке состояния отобразится такая подсказка: Вы можете перемещаться к нужной букве, используя клавиатуру'. Это можно сделать, используя обработчик событий, реагирующий на прокрутку страницы (есть и такой!). Он называется onScroll:
<BODY onKeyPress="press()" onKeyDown="this.style.color='gray'" 'Вы можете перемещаться к нужной букве, используя клавиатуру''>
Кстати, 1 раз появившись, подсказка так и останется в строке состояния, но в данном случае в этом нет ничего плохого. Строка состояния - место не самое заметное, так что подсказка в ней выглядит вполне корректно. Вот чего делать не надо, так это использовать бросающиеся в глаза методы типа alert:
<BODY onKeyPress="press()" onKeyDown="this.style.color='gray'" onKeyUp="this.style.color='black'" onScroll="alert('Вы можете перемещаться к нужной букве, используя клавиатуру'')>
В этом случае при попытке прокрутки страницы вручную пользователь < разу же получит окно-предупреждение. Если же он просто хочет почему- либо использовать ручную прокрутку, это окно будет его раздражать и мешать работе. Так что предыдущее решение как нельзя более подходит для данного случая - небольшая подсказка в строке состояния и все.
Ладно, давайте посмотрим, что у нас получилось, здесь введено еще несколько усовершен ствований, связанных с использованием таблицы стилей. Например, нет необходимости каждый термин заключать в теги <В> и </В>. Вместо этого для тега <DT> заранее определено стилевое свойство font-weight: bold;.
<!DOCTYPE html><html><head><title>Словарь терминов</title>
<STYLE>BODY{background:#EAE;color:black}A:link,A:active,A:visited{color:#7A3}
DT {font-weight: bold;} </STYLE>
<SCRIPT>function press () switch(window.event.keyCode)
{case 1072: case 102: document.all.BukvaA.scrollIntoView();
break; case 1073: case 44: document.all.BukvaB.scrollIntoView();
break; case 1074: case 100: document.all.BukvaV.scrollIntoView ();
break; case 1075: case 117: document.all.BukvaG.scrollIntoView();
document.all.BukvaD.scrollIntoView();
break; case 1077: case 116: document.all.BukvaE.scrollIntoView();
break; default:
document.all.Top.scrollIntoView(); break}}
</SCRIPT></head><BODY onKeyPress="press()" onKeyDown="this.style.color='gray'" onKeyUp="this.style.color='black'" onScroll="window.status='Вы можете перемещаться к нужной букве, используя клавиатуру!'>
<Н1><А NAME=Top>Cловарь терминов</А></Н1>
<HR ALIGN=left WIDTH=40%>
<Н3><А HREF=#BukvaA>A</A>
<А HREF=#BukvaB>Б</A>
<А HREF=#BukvaV>B</A>
<А HREF=#BukvaG>Г</A>
<А HREF=#BukvaD>Д</A>
<А HREF=#BukvaE>E</A></Н3>Для перемещения к соответствующей букве вы можете использовать клавиатуру
<HR ALIGN=left WIDTH=40%>
<Н1><А NAME=BukvaA>A</A></H1>
<DL><DT><A NAME="avtentich>AБTEHTИЧECKИЙ КАДАНС</А>
<DD>кадансовый оборот, в котором заключительная тоническая гармония предваряется доминантовой <DT>
<A NAME=aliquot>AЛИKBOTHЫE СТРУНЫ</А>
<DD>резонирующие струны, к которым исполнитель не прикасается во время игры
<DT><A NAME=atakta>ATAKTA</A>
<DD>гармонический элемент на басу нижнего или верхнего вводного тона
</DL><SMALLXA HREF=#Top>B начало</А>
</SМАLL><HR ALIGN=left WIDTH=40%>
<H1><A NAME=BukvaB>Б</A></H1>
<DL><DT><A NAME=bagatel>БАГАТЕЛЬ</A>
<DD>небольшая нетрудная для исполнения пьеса<DT>
<A NAME=bartok>БAPTOKOBCKOE ПИЦЦИКАТО</А>
<DD>сильный щипок струны с последующим ударом о струны о гриф<DT>
<A NAME=bonang>БОНАНГ</A><DD>Haбop из 10-12 гонгов разного размера </DL>
<SMALL><A HREF=#Top>B нaчaлo</A></SMALL>
<HR ALIGN=left WIDTH=40%>
<H1><A NAME=BukvaV>B</A></H1><DL>
</DL><SMALL><A HREF=#Top>B Haчaлo</A></SMALL>
<HR ALIGN=left WIDTH=40%>
<H1><A NAME=BukvaG>Г</A></H1>
<DL></DL><SMALL><A HREF="#Top>B нaчaло</A></SMALL>
<HR ALIGN=left WIDTH=40%>
<H1><A NAME=BukvaD>Д</A></H1>
<DL></DL>
<SMALL><A HREF=#Top>B нaчaлo</A></SMALL>
<HR ALIGN=left WIDTH=40%>
<H1><A NAME=BukvaE>E</A></H1>
<DL></DL><SMALL><A HREF=#Top>B начало</A></SMALL>
</body></html>
Итак, мы познакомились со всеми основными обработчиками событий. Конечно, существуют и другие обработчики, но они применяются реже.
