Как правило, на высокопосещаемых сайтах или сайтах со сложной структурой становится просто необходимым использование горячих клавиш для более простой и удобной навигации. Поэтому давайте разберемся, как настроить горячие клавиши на сайте.
Переход по ссылкам через горячие клавиши осуществляется благодаря атрибуту accesskey (мы уже разбирались с атрибутами ссылок в статье: Как сделать ссылку в HTML). Применяется данный атрибут следующим образом:
<a href="http://nubex.ru" accesskey="n">Конструктор сайтов "Нубекс"</a>В этом примере используется горячая клавиша n для перехода по ссылке.
Атрибут accesskey может применяться не только к ссылкам, но и к другим элементам (картинка, кнопка, текстовое поле, флажок и т.д.). Его действие - фокусировка на нужном элементе. А выполнение конкретного действия зависит от типа элемента. Например, для ссылки - это переход по ссылке, для флажка - проставление галочки, для кнопки - клик по кнопке.
Активация горячей клавиши происходит по-разному в разных браузерах:
- Google Chrome: Alt+Key;
- Firefox: Shift+Alt+Key;
- Opera: Shift+Esc+Key;
- Internet Explorer: Alt+Key;
- Safari: Alt+Key.
Горячие клавиши на сайте с помощью JS
Конечно, хотелось бы получить больше возможностей в навигации по сайту, переходу между элементами с помощью горячих клавиш. И если есть такая необходимость, лучше использовать JavaScript. Изобретать велосипед не нужно (как это любят делать многие неопытные разработчики), можно воспользоваться одним из готовых решений. Например, JS-Hotkeys. Использовать его очень просто:
$(document).bind('keydown', 'ctrl+n', function(){ /* Код, который исполняется при нажатии горячих клавиш Ctrl+n */ });Например, активация ссылки горячими клавишами Ctrl+n при помощи JavaScript:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Переход по ссылкам с помощью горячих клавиш - "Нубекс"</title>
<script>
$(document).bind('keydown', 'ctrl+n', function(){document.getElementById('nubex').click();});
</script>
</head>
<body>
<a href="http://nubex.ru" id="nubex">Конструктор сайтов "Нубекс"</a>
</body>
</html>