← Все статьи

Туториалы

Добавьте собственные сочетания клавиш на любой сайт

17 мая 2026 · автор JustZix Team

Некоторые сайты построены для опытных пользователей с богатыми сочетаниями клавиш. Большинство — нет. С JavaScript-правилом JustZix вы можете добавить собственные сочетания на любую страницу — перейти к следующей статье, прокрутить длинный документ, сфокусировать поле поиска или запустить любую кнопку нажатием клавиши.

Строительный блок: слушатель keydown

Каждая система сочетаний начинается с одного слушателя на document. JustZix запускает ваш JS один раз за загрузку страницы, так что слушатель привязывается рано и покрывает всю страницу.

document.addEventListener('keydown', function (e) {
  // игнорировать нажатия при наборе в поле
  var tag = (e.target.tagName || '').toLowerCase();
  if (tag === 'input' || tag === 'textarea' || e.target.isContentEditable) {
    return;
  }
  // сочетания идут здесь
});

Ранний return важен: он не даёт вашим сочетаниям срабатывать, пока пользователь набирает в поле поиска или комментария.

Пример: прокрутка клавишами j и k

Это даёт любой странице классическую прокрутку в стиле vim, которую используют читалки лент.

document.addEventListener('keydown', function (e) {
  var tag = (e.target.tagName || '').toLowerCase();
  if (tag === 'input' || tag === 'textarea' || e.target.isContentEditable) return;

  if (e.key === 'j') {
    window.scrollBy({ top: 400, behavior: 'smooth' });
  } else if (e.key === 'k') {
    window.scrollBy({ top: -400, behavior: 'smooth' });
  } else if (e.key === 'g') {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }
});

Пример: переход к следующей или предыдущей ссылке

У многих сайтов есть ссылки «следующая» и «предыдущая», но нет для них сочетания. Привяжите клавиши со стрелками (с модификатором, чтобы не конфликтовать с обычной прокруткой).

document.addEventListener('keydown', function (e) {
  if (!e.altKey) return;

  if (e.key === 'ArrowRight') {
    var next = document.querySelector('a[rel="next"], .pagination-next');
    if (next) next.click();
  } else if (e.key === 'ArrowLeft') {
    var prev = document.querySelector('a[rel="prev"], .pagination-prev');
    if (prev) prev.click();
  }
});

Удержание Alt делает привязку безопасной — она не помешает собственному поведению стрелок в браузере.

Пример: фокус поля поиска клавишей /

Клавиша слэш открывает поиск на многих крупных сайтах. Добавьте её везде. Вызовите preventDefault(), чтобы символ слэша не попал в поле.

document.addEventListener('keydown', function (e) {
  if (e.key !== '/') return;
  var tag = (e.target.tagName || '').toLowerCase();
  if (tag === 'input' || tag === 'textarea') return;

  var search = document.querySelector(
    'input[type="search"], input[name="q"], input[placeholder*="оиск"]'
  );
  if (search) {
    e.preventDefault();
    search.focus();
  }
});

Постройте небольшую карту сочетаний

Когда у вас несколько сочетаний, объект-справочник держит правило аккуратным. Каждая клавиша отображается на функцию.

var shortcuts = {
  'j': function () { window.scrollBy({ top: 400, behavior: 'smooth' }); },
  'k': function () { window.scrollBy({ top: -400, behavior: 'smooth' }); },
  'r': function () { location.reload(); },
  't': function () { window.scrollTo({ top: 0, behavior: 'smooth' }); }
};

document.addEventListener('keydown', function (e) {
  var tag = (e.target.tagName || '').toLowerCase();
  if (tag === 'input' || tag === 'textarea' || e.target.isContentEditable) return;

  var action = shortcuts[e.key];
  if (action) action();
});

Советы

• Всегда пропускайте поля ввода, иначе ваши сочетания перехватят набор.
• Используйте модификатор (Alt, Ctrl) для разрушительных действий вроде перезагрузки, чтобы не запустить их случайно.
• Проверяйте e.key, а не устаревший e.keyCode — он читаемый и стабильный.
• Привязывайте правило к каждому сайту, если сочетания имеют смысл только там.

Смотрите проработанные примеры в готовых примерах или скачайте JustZix, чтобы добавить это в свой браузер. Чтобы вместо этого превратить частые действия в кнопки панели инструментов, прочтите кнопки «копировать как markdown» и «чистый URL».