← Все статьи

Туториалы

Кастомные горячие клавиши на любой странице — 4 JavaScript-паттерна

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

Ты часами сидишь в какой-то админ-панели, у которой нет Ctrl+S для сохранения, нет Ctrl+Enter для отправки, нет / для фокуса на поиск. Четыре JS-паттерна, чтобы добавить свои горячие клавиши — независимо от того, что предусмотрел автор сайта.

Паттерн 1 — глобальный слушатель keydown

Основы. Ловим keydown на document, проверяем модификаторы, выполняем действие:

document.addEventListener('keydown', (e) => {
  // Ctrl+Shift+S → нажать кнопку "Сохранить"
  if (e.ctrlKey && e.shiftKey && e.key === 'S') {
    e.preventDefault();
    document.querySelector('button[type="submit"]')?.click();
  }

  // Ctrl+/ → фокус на поле поиска
  if (e.ctrlKey && e.key === '/') {
    e.preventDefault();
    document.querySelector('input[type="search"], input[name="q"]')?.focus();
  }
});

Ключевое: e.preventDefault(), чтобы браузер не выполнил свою стандартную горячую клавишу (Ctrl+S = сохранить страницу). Без него пользователь получает окно сохранения HTML вместо твоего действия.

Паттерн 2 — контекстно-зависимый (только вне полей)

Одиночная клавиша (например, j/k = навигация между элементами) не должна срабатывать, пока пользователь печатает в textarea. Фильтруй по document.activeElement:

function isTyping() {
  const el = document.activeElement;
  if (!el) return false;
  const tag = el.tagName.toLowerCase();
  return tag === 'input' || tag === 'textarea'
    || el.isContentEditable;
}

document.addEventListener('keydown', (e) => {
  if (isTyping()) return;

  // j/k = навигация по карточкам списка (стиль Gmail)
  if (e.key === 'j') {
    e.preventDefault();
    document.querySelector('.card.focused')
      ?.nextElementSibling?.classList.add('focused');
  }
});

Без этого фильтра j, набранная в поле логина, активировала бы твою навигацию — пользователь никогда не смог бы ввести email ivan@example.com.

Паттерн 3 — последовательности клавиш (стиль Vim)

Некоторые действия заслуживают двух последовательных клавиш, например gg = прокрутка наверх (как Gmail/GitHub):

let lastKey = null;
let lastKeyTime = 0;
const SEQ_TIMEOUT_MS = 500;

document.addEventListener('keydown', (e) => {
  if (isTyping()) return;
  const now = Date.now();

  // gg → прокрутка наверх
  if (e.key === 'g' && lastKey === 'g' && (now - lastKeyTime) < SEQ_TIMEOUT_MS) {
    window.scrollTo({ top: 0, behavior: 'smooth' });
    lastKey = null;
    return;
  }

  // G (shift+g) → прокрутка вниз
  if (e.key === 'G' && e.shiftKey) {
    window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
    return;
  }

  lastKey = e.key;
  lastKeyTime = now;
});

Паттерн 4 — оверлей справки (?)

Горячие клавиши бесполезны, если ты не можешь их запомнить. Клавиша ? показывает оверлей с твоим списком:

const SHORTCUTS = [
  ['Ctrl+S', 'Сохранить форму'],
  ['Ctrl+/', 'Фокус на поиск'],
  ['j / k', 'Следующая / предыдущая карточка'],
  ['gg', 'Прокрутка наверх'],
  ['G',    'Прокрутка вниз'],
];

function showHelp() {
  const overlay = document.createElement('div');
  overlay.style.cssText = `
    position: fixed; inset: 0; background: rgba(0,0,0,.6);
    display: flex; align-items: center; justify-content: center;
    z-index: 999999;
  `;
  overlay.innerHTML = `
    

      
Горячие клавиши
      
        ${SHORTCUTS.map(([k, v]) => `
          
        `).join('')}
      

            
${k}
            
${v}
          
      
Esc или клик = закрыть
    
  `;
  overlay.onclick = () => overlay.remove();
  document.body.appendChild(overlay);
}

document.addEventListener('keydown', (e) => {
  if (isTyping()) return;
  if (e.key === '?') { e.preventDefault(); showHelp(); }
  if (e.key === 'Escape') document.querySelector('div[style*="rgba(0,0,0,.6)"]')?.remove();
});

Ловушки

• Конфликты с браузером: Ctrl+T, Ctrl+W, Ctrl+L не перехватываются. Chrome резервирует их на уровне ОС. Используй другие (Ctrl+Shift+что-то, Alt+что-то).
• Конфликты с ОС: Cmd+Tab на macOS, Alt+Tab на Windows — то же самое. Не настаивай.
• SPA с роутером — некоторые SPA динамически внедряют свои слушатели keydown. Твой может сработать раньше (используй stopPropagation) или позже (можешь восстановить оригинал через removeEventListener).
• Раскладка RU vs US — e.key возвращает локализованные буквы, e.code возвращает физические позиции клавиш. Для горячих клавиш в стиле j/k используй e.key; для позиционных (например, WASD) используй e.code.

Как подключить это к JustZix

1. Установи JustZix.
2. Правило для панели: URL-паттерн https://admin.mycompany.com/*, JavaScript = паттерны 1+2+4 из этой статьи.
3. Sync: те же горячие клавиши на ноутбуке и на рабочей машине.
4. Делись: отправь коллеге ссылку для импорта — он получит твои горячие клавиши в один клик.

Установи JustZix бесплатно и работай со скоростью клавиатуры.