русс | укр

Языки программирования

ПаскальСиАссемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование

Все о программировании


Linux Unix Алгоритмические языки Аналоговые и гибридные вычислительные устройства Архитектура микроконтроллеров Введение в разработку распределенных информационных систем Введение в численные методы Дискретная математика Информационное обслуживание пользователей Информация и моделирование в управлении производством Компьютерная графика Математическое и компьютерное моделирование Моделирование Нейрокомпьютеры Проектирование программ диагностики компьютерных систем и сетей Проектирование системных программ Системы счисления Теория статистики Теория оптимизации Уроки AutoCAD 3D Уроки базы данных Access Уроки Orcad Цифровые автоматы Шпаргалки по компьютеру Шпаргалки по программированию Экспертные системы Элементы теории информации

Работа с клавиатурой в JavaScript | События клавиатуры

При интерактивном взаимодействии пользователя с Web-страницей с использованием клавиатуры возникают следующие события:

  • keyDown - при нажатии клавиши;
  • keyPress - при нажатии клавиши;
  • keyUp - при отпускании клавиши.

События keyDown и keyPress различаются значениями свойств объекта event.

В лабораторной работе №13 (3 JS) "Определение и изменение свойств объектов Web-страницы" были рассмотрены свойства объкта event, связанные с работой с мышкой. При возникновении событий, связанных с работой пользователя с клавиатурой, объект event формирует и передает следующие свойства:

  • keyCode - возвращает значение Unicode клавиши (для цифр и латинских букв совпадает с ASCII-кодом клавиши), которое имеет особенности, зависящие от типа события:
    • для событий keyDown и keyUp - возвращает Unicode всех клавиш, включая управляющие, для букв не зависит от состояния регистра клавиатуры и установленного языка - всегда Unicode заглавных латинских букв;
    • для события keyPress - не реагирует на нажатие управляющих клавиш, возвращает Unicode букв с учетом регистра клавиатуры (заглавные, строчные) и установленного языка (латинский, русский и украинский).
  • altKey - возвращает true, если была нажата клавиша "Alt", и false в противном случае (только для события keyDown);
  • altLeft - возвращает true, если была нажата левая клавиша "Alt", и false в противном случае (только для события keyDown);
  • ctrlKey - возвращает true, если была нажата клавиша "Ctrl", и false в противном случае (только для события keyDown);
  • ctrlLeft - возвращает true, если была нажата левая клавиша "Ctrl", и false в противном случае (только для события keyDown);
  • shiftKey - возвращает true, если была нажата клавиша "Shift", и false в противном случае (только для события keyDown);
  • shifLeft - возвращает true, если была нажата левая клавиша "Shift", и false в противном случае (только для события keyDown);
  • repeat - возвращает true, если событие keyDown наступило повторно вследствие того, что пользователь удержал клавишу нажатой, и false в противном случае.

Хотя при нажатии правых управляющих клавиш ("Alt", "Ctrl" и "Shift") объект event не формирует свойств, аналогичных тем, которые создаются для левых управляющиз клавиш, определить, была ли нажата правая управляющая клавиша, можно следующим образом: если выражение event.altKey&&!event.altLeft возвращает значение true, значит была нажата именно правая клавиша "Alt".

Особенности работы с клавиатурой показаны в примере № 3, где путем обработки событий, связанных с нажатием определенных клавиш, выполняются загрузка рисунков на Web-страницу, их перемещение по экрану и изменение размера.

Пример 3

<HTML>
<HEAD>
<TITLE>Работа с клавиатурой/TITLE>
<SCRIPT>
function keyEvent()
{
status='Unicode= '+event.keyCode+ ' Символ='+String.fromCharCode(event.keyCode);
if((event.keyCode>=49)&&(event.keyCode<=51))
{
imgs.width=150;
imgs.style.position="absolute";
imgs.style.left=0;
imgs.style.top=0;
}
switch (event.keyCode) //Анализ Unicode клавиш
{
case 37: {imgs.style.pixelLeft-=10; break} // "Стрелка влево"
case 38: {imgs.style.pixelTop-=10; break} // "Стрелка вниз"
case 39: {imgs.style.pixelLeft+=10; break} // "Стрелка вправо"
case 40: {imgs.style.pixelTop+=10; break} // "Стрелка вверх"
case 49: {imgs.src="flower.jpg"; break} // "1"
case 50: {imgs.src="everest.jpg"; break} // "2"
case 51: {imgs.src="fish.gif"; break} // "3"
case 188:{imgs.width--; break;} // "<"
case 190:{imgs.width++; break;} // ">"
}
}
function help()
{
alert("Выбор рисунка: клавиши '1','2' и '3'\n" +
"Перемещение рисунка: клавиши 'Стрелка влево','Стрелка вправо',"+
" 'Стрелка вниз' и 'Стрелка вверх'\n"+
"Изменение размера рисунка: клавиши '<' и '>'");
event.returnValue=false;
}
</SCRIPT>
</HEAD>
<BODY onHelp="help()" onKeyDown="keyEvent()">
<IMG NAME=imgs WIDTH=0>
</BODY>
</HTML>

После загрузки Web-страницы появляется пустое окно браузера. При нажатии любой клавиши клавиатуры по событию keyDown вызывается функция keyEvent(), которая анализирует Unicode клавиш и выполняет следующие действия:

  • выводит в поле статуса окна браузера значение Unicode клавиши и ее символ, полученный методом fromCharCode() объекта String;
  • по нажатию клавиш "1", "2" и "3" - выводит в окно браузера изображение соответственно цветка, горы Эверест и рыбок;
  • при нажатии клавиш "Стрелка влево", "Стрелка вправо", "Стрелка вниз" и "Стрелка вверх" - перемещает полученное изображение по окну браузера;
  • - при нажатии клавиш ">" и "<" - увеличивает или уменьшает размер изображения .

При нажатии клавиши "F1" по событию Help вызывается функция Help(), которая выводит на экран подсказку о назначении клавиш, используемых в примере. Поскольку это событие обрабатывается также браузером, можно запретить вывод сообщений браузера, указав в функции значение свойства returnValue объекта event, равным false. Это также можно сделать несколько по другому:

<BODY onHelp="help(); retorn false"

Просмотров: 20011

Вы можете --> Заказать скрипт

Вернуться воглавление


Карта сайта Карта сайта укр


Уроки php mysql Программирование

Онлайн система счисления Калькулятор онлайн обычный Инженерный калькулятор онлайн Замена русских букв на английские для вебмастеров Замена русских букв на английские

Аппаратное и программное обеспечение Графика и компьютерная сфера Интегрированная геоинформационная система Интернет Компьютер Комплектующие компьютера Лекции Методы и средства измерений неэлектрических величин Обслуживание компьютерных и периферийных устройств Операционные системы Параллельное программирование Проектирование электронных средств Периферийные устройства Полезные ресурсы для программистов Программы для программистов Статьи для программистов Cтруктура и организация данных


 


Полезен материал? Поделись:

Не нашли то, что искали? Google вам в помощь!

 
 

© life-prog.ru При использовании материалов прямая ссылка на сайт обязательна.