Атрибут accesskey тега <input>

Описание

Атрибут accesskey позволяет задать клавишу быстрого доступа к элементу <input>. При нажатии комбинации клавиш (обычно Alt + ключ в Windows, Ctrl + ключ в Mac) фокус переходит к соответствующему полю ввода.

Пример использования:
<!-- Поле с клавишей доступа --> <label for="search">Поиск (Alt+S):</label> <input type="text" id="search" name="search" accesskey="s"> <!-- Кнопка с клавишей доступа --> <input type="submit" value="Отправить" accesskey="o">

Особенности работы:

Платформа Комбинация клавиш Пример
Windows Alt + accesskey Alt+S для focus на поле
Mac Ctrl + Option + accesskey Ctrl+Option+S
Linux Alt + accesskey Alt+S

Рекомендации по выбору клавиш:

<form action="/login"> <label for="username">Логин (Alt+U):</label> <input type="text" id="username" name="username" accesskey="u"> <label for="password">Пароль (Alt+P):</label> <input type="password" id="password" name="password" accesskey="p"> <input type="submit" value="Войти" accesskey="l"> <!-- l от login --> </form>

Советы по использованию:

  • Используйте первую букву английского названия функции (S - Search)
  • Избегайте конфликтов с системными комбинациями браузера
  • Указывайте подсказку о горячей клавише в тексте label
  • Не злоупотребляйте - достаточно 3-5 основных клавиш на странице
  • Для цифровых клавиш используйте цифры: accesskey="1"

Пример с визуальным обозначением:

<style> .access-key { text-decoration: underline; } </style> <label for="email"><span class="access-key">E</span>mail:</label> <input type="email" id="email" name="email" accesskey="e">

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

  • Разные браузеры и ОС используют разные комбинации клавиш
  • Может конфликтовать с сочетаниями клавиш браузера
  • Плохая поддержка на мобильных устройствах
  • Неочевидно для пользователей без подсказок

Альтернативный подход с JavaScript:

<script> document.addEventListener('keydown', function(e) { if(e.altKey && e.key === 's') { e.preventDefault(); document.getElementById('search').focus(); } }); </script> <label for="search">Поиск (Alt+S):</label> <input type="text" id="search" name="search">

Примечание: Хотя атрибут accesskey может улучшить доступность для пользователей клавиатуры, в современных веб-приложениях чаще используют кастомные JavaScript-решения для обработки горячих клавиш, обеспечивая более предсказуемое поведение.