Горячие клавиши в вебе, давайте обсудим.

Одна из важнейших вещей, над которой стоит подумать при реализации горячих клавиш на JavaScript для веб-приложения, это исключить переопределение клавиш предоставляемых клиентским браузером. Представьте себе, что вы используете некое веб-приложение, и вам понадобилось закрыть вкладку надав Ctrl+W, но при этом вкладка не зарывается, а отрабатывает некоторое действие приложение, только потому, что разработчик переопределил горячую клавишу используемую вашим браузером. Какая досада. По этой причине рекомендую с осторожностью использовать клавиши Ctrl (Windows) или Cmd (Mac) в ваших приложениях.

Вместо некоторых комбинаций можно использовать иные функциональные клавиши, напримр F1. Вероятно вам известно, что JavaScript имеет множество полезных обработчиков событий. Для горячих клавиш мы будем использовать onkeyup, который позволит выполнить действие при нажатии на клавишу. Нам только требуется сравнить возвращаемое значение от onkeyup с кодом клавиши используемой в какой либо из наших клавиатурных комбинаций. Клавиатурные коды это простые коды состоящие из 2 или 3 цифр. Какждая клавиша клавиатуры имеет свой собственный код. Например код клавиши Ctrl – 17.

Полная таблица кодов клавиш приведена в конце поста.
Примеры

В приведенном ниже примере, мы просто проверяем какая клавиша нажата пользователем. Если это Ctrl + S, функция срабатывает.
Первый код без использования JQuery.
ar isCtrl = false;
document.onkeyup=function(e) {
if(e.which == 17) isCtrl=false;
}document.onkeydown=function(e){
if(e.which == 17) isCtrl=true;
if(e.which == 83 && isCtrl == true) {
alert('Keyboard shortcuts are cool!');
return false;
}
}

Пример с использованием JQuery фреймворка.
var isCtrl = false;$(document).keyup(function (e) {
if(e.which == 17) isCtrl=false;
}).keydown(function (e) {
if(e.which == 17) isCtrl=true;
if(e.which == 83 && isCtrl == true) {
alert('Keyboard shortcuts + JQuery are even more cool!');
return false;
}
});

В этих примерах, мы начинаем с проверки: нажата ли клавиша Ctrl. Если да, то начальное значение переменной isCtrl устанавливается в true. Если Ctrl отпущен, то isCtrl снова становиться false.
После этого мы должны убедиться, что вторая нажатая клавиша – это S. Так как это комбинация клавишь, мы должны проверить, что isCtrl все еще true.
Если все в порядке, то мы можем запустить функцию и показать наше сообщение. Естейственно, в реальном приложении вы будете использовать более полезную функцию.

Оригинал статьи: http://www.catswhocode.com/blog/using-keyboard-shortcuts-in-javascript

































































































































































































































































































































































Key

Keyboard code

Backspace

8

Tab

9

Enter

13

Shift

16

Ctrl

17

Alt

18

Pause

19

Capslock

20

Esc

27

Page up

33

Page down

34

End

35

Home

36

Left arrow

37

Up arrow

38

Right arrow

39

Down arrow

40

Insert

45

Delete

46

0

48

1

49

2

50

3

51

4

52

5

53

6

54

7

55

8

56

9

57

a

65

b

66

c

67

d

68

e

69

f

70

g

71

h

72

i

73

j

74

k

75

l

76

m

77

n

78

o

79

p

80

q

81

r

82

s

83

t

84

u

85

v

86

w

87

x

88

y

89

z

90

0 (numpad)

96

1 (numpad)

97

2 (numpad)

98

3 (numpad)

99

4 (numpad)

100

5 (numpad)

101

6 (numpad)

102

7 (numpad)

103

8 (numpad)

104

9 (numpad)

105

*

106

+

107

-

109

.

110

/

111

F1

112

F2

113

F3

114

F4

115

F5

116

F6

117

F7

118

F8

119

F9

120

F10

121

F11

122

F12

123

=

187

Coma

188

Slash /

191

Backslash \

220
Несмотря на сложности, организация практического взаимодействия инновационна. Организация практического взаимодействия спорадически детерминирует направленный маркетинг, работая над проектом. Продуктовый ассортимент, анализируя результаты рекламной кампании, основан на тщательном анализе. Побочный PR-эффект, как принято считать, притягивает департамент маркетинга и продаж, повышая конкуренцию. Стимулирование сбыта индуцирует медиаплан, осознав маркетинг как часть производства. Привлечение аудитории, не меняя концепции, изложенной выше, изменяет инвестиционный продукт, оптимизируя бюджеты.
Dodex 2012 - 2020
Электронная почта: contact@dodex.org
Skype: dodexorg
Twitter: @dodexorg