Быстрые комбинации клавиш и класс Keymap

Программы с графическим интерфейсом, как правило, определяют быстрые ком_ бинации клавиш для команд, доступных через раскрывающиеся меню, панели инструментов и тому подобное. Веб_броузеры (и HTML) в основном ориентирова_ ны на использование мыши, и по умолчанию веб_приложения быстрые комбина_ ции клавиш не поддерживают. Тем не менее такая поддержка возможна. Если веб_приложение моделирует раскрывающиеся меню средствами DHTML, необхо_ димо также предусмотреть поддержку комбинаций быстрых клавиш для доступа к пунктам этого меню. Пример 17.6 демонстрирует, как можно этого добиться. В нем определяется класс Keymap, который отображает идентификаторы комби_ наций клавиш, такие как «Escape», «Delete», «Alt_Z» и «alt_ctrl_shift_F5», на JavaScript_функции, вызываемые в ответ на нажатия этих комбинаций.

Привязки клавиш передаются конструктору Keymap() в виде JavaScript_объекта,

в котором именами свойств являются идентификаторы комбинаций клавиш, а значениями свойств – функции_обработчики. Добавление и удаление привязок выполняется с помощью методов bind() и unbind(). Установка объекта Keymap

в HTML_элемент (чаще всего в объект Document) выполняется методом install(). В процессе установки происходит регистрация обработчиков событий onkeydown и onkeypress в данном элементе с целью перехвата нажатий как функциональ_ ных, так и алфавитно_цифровых клавиш.

Начинается пример 17.6 с обширного комментария, где модуль описывается бо_ лее подробно. Особое внимание следует обратить на раздел комментария, оза_ главленный как «Ограничения».

Пример 17.6. Класс Keymap для реализации быстрых комбинаций клавиш

/*

* Keymap.js: привязка клавиатурных событий к функциям_обработчикам.

*

* Этот модуль определяет класс Keymap. Экземпляр этого класса представляет

* собой отображение идентификаторов комбинаций клавиш (определяемых далее)

* на функции_обработчики. Объект Keymap может устанавливаться в HTML_элемент

* для обработки событий keydown и keypress. Когда возникает такое событие,

* объект с помощью карты отображения комбинаций вызывает соответствующую

* функцию_обработчик.

*

* При создании объекта Keymap ему передается JavaScript_объект, который

* представляет первоначальный набор привязок. Имена свойств этого объекта

* должны совпадать с идентификаторами комбинаций клавиш, а значениями

* этих свойств являются функции_обработчики.

*

* После создания объекта Keymap добавлять новые привязки можно

* методом bind(), который принимает идентификатор комбинации

* и функцию_обработчик. Удалять существующие привязки можно методом

* unbind(), которому передается идентификатор комбинации клавиш.

*

* Чтобы использовать объект Keymap, следует вызвать его метод install(),

* передав ему HTML_элемент, такой как объект document. Метод install()

* добавляет к заданному объекту обработчики событий onkeypress и onkeydown,

* возможно, замещая установленные ранее обработчики.

* Когда вызываются эти обработчики, они определяют идентификатор

* комбинации клавиш из события и вызывают функцию_обработчик,

* привязанную к этой комбинации, если таковая существует.

* Если комбинация клавиш не связана с какой_либо функцией, вызывается

* функция_обработчик, предлагаемая по умолчанию (см. далее), если она определена.

* Один объект Keymap может быть установлен в несколько HTML_элементов.

*

* Идентификаторы комбинаций клавиш

*

* Идентификаторы комбинаций клавиш _ это строковое представление клавиши,

* нечувствительное к регистру символов, плюс возможная клавиша_модификатор,

* удерживаемая к моменту нажатия основной клавиши.

* Имя клавиши _ это обычно текст, написанный на самой клавише

* в английской раскладке. Допустимыми именами клавиш считаются:

* "A", "7", "F2", "PageUp", "Left", "Delete", "/", "~".

* Для клавиш, соответствующих печатным символам, именем клавиши является

* сам символ, который генерируется при нажатии клавиши.

* Для клавиш, соответствующих непечатным символам, именами клавиш являются

* производные от констант KeyEvent.DOM_VK_, определяемых броузером Firefox.

* Они получаются простым отбрасыванием из имени константы префикса "DOM_VK_"

* и удаления всех символов подчеркивания. Например, константа

* DOM_VK_BACK_SPACE превращается в имя BACKSPACE. Полный список имен

* находится в объекте Keymap.keyCodeToFunctionKey того же модуля.

*

* Идентификаторы клавиш могут содержать префиксы клавиш_модфикаторов, такие

* как Alt_, Ctrl_ и Shift_. Имена клавиш_модификаторов нечувствительны

* к регистру символов, но если их несколько в идентификаторе комбинации,

* они должны следовать в алфавитном порядке.

* Примеры некоторых идентификаторов комбинаций клавиш, включающих

* клавиши_модификаторы: "Shift_A", "ALT_F2" и "alt_ctrl_delete".

* Обратите внимание: идентификатор "ctrl_alt_delete" считается недопустимым,

* потому что имена клавиш_модификаторов в нем следуют не в алфавитном порядке.

*

* Знаки пунктуации, получаемые с помощью клавиши Shift, обычно возвращаются в виде

* соответствующего символа. Например, Shift_2 генерирует идентификатор "@".

* Но если при этом удерживается клавиша Alt или Ctrl, используется

446 Глава 17. События и обработка событий

* немодифицированный символ. Например, мы получим идентификатор

* Ctrl_Shift_2, а не Ctrl_@.

*

* Функции_обработчики

*

* Когда функция_обработчик вызывается, ей передаются три аргумента:

* 1) HTML_элемент, в котором возникло событие

* 2) Идентификатор нажатой комбинации клавиш

* 3) Объект события keydown

*

* Обработчик по умолчанию

*

* В качестве имени функции_обработчика может использоваться

* зарезервированное слово "default". Эта функция вызывается,

* когда отсутствует специальная привязка.

*

// Ограничения

//

// Невозможно привязать функцию_обработчик ко всем клавишам. Операционные

// системы обычно перехватывают некоторые комбинации (например, Alt_F4).

// Броузеры также могут перехватывать некоторые комбинации

// (например, Ctrl_S). Этот программный код зависит от типа броузера

// операционной системы и региональных параметров.

// Функциональные клавиши и модифицированные функциональные клавиши

// обрабатываются без проблем, точно так же без проблем обрабатываются

// немодифицированные алфавитно_цифровые клавиши. Менее устойчиво

// обслуживаются комбинации алфавитно_цифровых клавиш с клавишами Ctrl

// и Alt и в особенности с клавишами, содержащими символы пунктуации.

*/ // Функция_конструктор

function Keymap(bindings) {

this.map = {}; // Определить ассоциативный массив identifier_>handler if (bindings) { // Скопировать начальные привязки в него

// с преобразованием в нижний регистр

for(name in bindings) this.map[name.toLowerCase( )] = bindings[name];

}

}

// Связывает заданный идентификатор комбинации клавиш с заданной функцией_обработчиком Keymap.prototype.bind = function(key, func) {

this.map[key.toLowerCase()] = func;

};

// Удаляет привязку по заданному идентификатору комбинации клавиш Keymap.prototype.unbind = function(key) {

delete this.map[key.toLowerCase()];

};

// Установить этот объект Keymap в заданный HTML_элемент

Keymap.prototype.install = function(element) {

// Это функция_обработчик события var keymap = this;

function handler(event) { return keymap.dispatch(event); }

// Установить ее

if (element.addEventListener) { element.addEventListener("keydown", handler, false); element.addEventListener("keypress", handler, false);

}

else if (element.attachEvent) { element.attachEvent("onkeydown", handler); element.attachEvent("onkeypress", handler);

}

else {

element.onkeydown = element.onkeypress = handler;

}

};

// Этот объект отображает значения keyCode на имена

// функциональных клавиш, которые не соответствуют печатным символам.

// IE и Firefox используют практически совместимые коды клавиш.

// Однако эти коды зависят от текущей раскладки клавиатуры

// и могут иметь разные значения.

Keymap.keyCodeToFunctionKey = {

8:"backspace", 9:"tab", 13:"return", 19:"pause", 27:"escape", 32:"space", 33:"pageup", 34:"pagedown", 35:"end", 36:"home", 37:"left", 38:"up", 39:"right", 40:"down", 44:"printscreen", 45:"insert", 46:"delete", 112:"f1", 113:"f2", 114:"f3", 115:"f4", 116:"f5", 117:"f6", 118:"f7", 119:"f8", 120:"f9", 121:"f10", 122:"f11", 123:"f12",

144:"numlock", 145:"scrolllock"

};

// Этот объект отображает значения кодов клавиш в событии

// keydown на имена клавиш, соответствующих печатным символам.

// Алфавитно_цифровые символы имеют свой ASCII_код, но знаки пунктуации

// не имеют. Обратите внимание: коды зависят от региональных

// параметров и в национальных раскладках могут работать некорректно. Keymap.keyCodeToPrintableChar = {

48:"0", 49:"1", 50:"2", 51:"3", 52:"4", 53:"5", 54:"6", 55:"7", 56:"8", 57:"9", 59:";", 61:"=", 65:"a", 66:"b", 67:"c", 68:"d",

69:"e", 70:"f", 71:"g", 72:"h", 73:"i", 74:"j", 75:"k", 76:"l", 77:"m", 78:"n", 79:"o", 80:"p", 81:"q", 82:"r", 83:"s", 84:"t", 85:"u", 86:"v", 87:"w", 88:"x", 89:"y", 90:"z", 107:"+", 109:"_", 110:".", 188:",", 190:".", 191:"/", 192:"`", 219:"[", 220:"\\", 221:"]", 222:"\""

};

// Этот метод перенаправляет клавиатурные события в соответствии с привязками. Keymap.prototype.dispatch = function(event) {

var e = event || window.event; // Учесть особенности модели событий IE

// Вначале у нас нет ни клавиш модификаторов, ни имени основной клавиши var modifiers = ""

var keyname = null;

if (e.type == "keydown") { var code = e.keyCode;

// Игнорировать события keydown для клавиш Shift, Ctrl и Alt if (code == 16 || code == 17 || code == 18) return;

// Получить имя клавиши из карты

keyname = Keymap.keyCodeToFunctionKey[code];

448 Глава 17. События и обработка событий

// Если это не функциональная клавиша, но при этом нажата клавиша

// Ctrl или Alt, необходимо интерпретировать ее как функциональную if (!keyname && (e.altKey || e.ctrlKey))

keyname = Keymap.keyCodeToPrintableChar[code];

// Если имя этой клавиши было определено, задать ее модификаторы.

// Иначе просто вернуть управление и игнорировать это событие keydown. if (keyname) {

if (e.altKey) modifiers += "alt_"; if (e.ctrlKey) modifiers += "ctrl_";

if (e.shiftKey) modifiers += "shift_";

}

else return;

}

else if (e.type == "keypress") {

// Если была нажата клавиша Ctrl или Alt, то мы уже обработали ее. if (e.altKey || e.ctrlKey) return;

// В Firefox событие keypress возникает даже для непечатных клавиш.

// В этом случае просто вернуть управление и сделать вид, что

// ничего не произошло.

if (e.charCode != undefined && e.charCode == 0) return;

// Firefox передает печатные клавиши в e.charCode, IE _ в e.charCode var code = e.charCode || e.keyCode;

// Данный код _ это ASCII_код, поэтому можно просто преобразовать

// его в строку. keyname=String.fromCharCode(code);

// Если имя клавиши в верхнем регистре, преобразовать его

// в нижний регистр и добавить модификатор shift.

// Делается это для корректной обработки режима CAPS LOCK,

// когда прописные буквы передаются без установленного модификатора shift. var lowercase = keyname.toLowerCase();

if (keyname != lowercase) {

keyname = lowercase; // Использовать форму имени в нижнем регистре modifiers = "shift_";// и добавить модификатор shift.

}

}

// Теперь известны имя клавиши и модификаторы, далее необходимо

// отыскать функцию_обработчик для данной комбинации клавиш var func = this.map[modifiers+keyname];

// Если ничего не было найдено, использовать обработчик, предлагаемый

// по умолчанию, если он существует

if (!func) func = this.map["default"];

// Вызвать функцию_обработчик func(target, modifiers+keyname, e);

// Прервать дальнейшее распространение события и предотвратить

// выполнение действия, предлагаемого по умолчанию.

// Обратите внимание: preventDefault обычно не предотвращает

// выполнение верхнеуровневых команд броузера, таких как

// нажатие клавиши F1 для вызова справочной службы.

}

};