Серёжа СыроежкинСерёжа СыроежкинКопирайтер

Как поставить горячую клавишу на ссылку

теги: кнопки, html

Как правило, на высокопосещаемых сайтах или сайтах со сложной структурой становится просто необходимым использование горячих клавиш для более простой и удобной навигации. Поэтому давайте разберемся, как настроить горячие клавиши на сайте.

Переход по ссылкам через горячие клавиши осуществляется благодаря атрибуту 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>

Комментарии 0