← Todos los artículos

Tutoriales

Atajos de teclado personalizados en cualquier página — 4 patrones JavaScript

15 mayo 2026 · por JustZix Team

Pasas horas cada día en algún panel de administración que no tiene Ctrl+S para guardar, no tiene Ctrl+Enter para enviar, no tiene / para enfocar la búsqueda. Cuatro patrones JS para añadir tus atajos — independientemente de lo que haya previsto el autor del sitio.

Patrón 1 — listener keydown global

Lo básico. Captura keydown en document, comprueba los modificadores, ejecuta la acción:

document.addEventListener('keydown', (e) => {
  // Ctrl+Shift+S → pulsar el botón "Guardar"
  if (e.ctrlKey && e.shiftKey && e.key === 'S') {
    e.preventDefault();
    document.querySelector('button[type="submit"]')?.click();
  }

  // Ctrl+/ → enfocar el campo de búsqueda
  if (e.ctrlKey && e.key === '/') {
    e.preventDefault();
    document.querySelector('input[type="search"], input[name="q"]')?.focus();
  }
});

Clave: e.preventDefault() para que el navegador no ejecute su atajo predeterminado (Ctrl+S = guardar la página). Sin él, el usuario obtiene la ventana de guardar HTML en lugar de tu acción.

Patrón 2 — sensible al contexto (solo fuera de los campos)

Una tecla única (p. ej. j/k = navegar entre elementos) no puede dispararse mientras el usuario escribe en un textarea. Filtra según 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 = navegar entre las cards de una lista (estilo Gmail)
  if (e.key === 'j') {
    e.preventDefault();
    document.querySelector('.card.focused')
      ?.nextElementSibling?.classList.add('focused');
  }
});

Sin este filtro, una j escrita en un campo de login activaría tu navegación — el usuario nunca podría escribir el correo juan@example.com.

Patrón 3 — secuencias de teclas (estilo Vim)

Algunas acciones merecen dos teclas consecutivas, p. ej. gg = ir arriba del todo (como 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 → desplazar arriba
  if (e.key === 'g' && lastKey === 'g' && (now - lastKeyTime) < SEQ_TIMEOUT_MS) {
    window.scrollTo({ top: 0, behavior: 'smooth' });
    lastKey = null;
    return;
  }

  // G (shift+g) → desplazar abajo
  if (e.key === 'G' && e.shiftKey) {
    window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
    return;
  }

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

Patrón 4 — overlay de ayuda (?)

Los atajos son inútiles si no consigues recordarlos. La tecla ? muestra un overlay con tu lista:

const SHORTCUTS = [
  ['Ctrl+S', 'Guardar el formulario'],
  ['Ctrl+/', 'Enfocar la búsqueda'],
  ['j / k', 'Card siguiente / anterior'],
  ['gg', 'Desplazar arriba'],
  ['G',    'Desplazar abajo'],
];

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 = `
    

      
Atajos
      
        ${SHORTCUTS.map(([k, v]) => `
          
        `).join('')}
      

            
${k}
            
${v}
          
      
Esc o clic = cerrar
    
  `;
  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();
});

Trampas

• Conflictos con el navegador: Ctrl+T, Ctrl+W, Ctrl+L no son interceptables. Chrome los reserva a nivel de SO. Usa otros (Ctrl+Shift+algo, Alt+algo).
• Conflictos con el SO: Cmd+Tab en macOS, Alt+Tab en Windows — lo mismo. No insistas.
• SPA con router — algunas SPA inyectan dinámicamente sus propios listeners keydown. El tuyo puede dispararse antes (usa stopPropagation) o después (puedes restaurar el original vía removeEventListener).
• Layout ES vs US — e.key devuelve las letras localizadas, e.code devuelve las posiciones físicas de las teclas. Para los atajos estilo j/k usa e.key; para los posicionales (p. ej. WASD) usa e.code.

Cómo conectarlo a JustZix

1. Instala JustZix.
2. Regla por panel: patrón de URL https://admin.mycompany.com/*, JavaScript = patrones 1+2+4 de este artículo.
3. Sync: los mismos atajos en el portátil y en la máquina de trabajo.
4. Compartir: envía a un compañero un enlace de compartición — importa tus atajos con un clic.

Instala JustZix gratis y trabaja a la velocidad del teclado.