← Todos los artículos

Tutoriales

Añade atajos de teclado personalizados a cualquier sitio web

17 mayo 2026 · por JustZix Team

Algunos sitios están construidos para usuarios avanzados con atajos de teclado ricos. La mayoría no. Con una regla JavaScript de JustZix puedes añadir tus propios atajos a cualquier página — saltar al siguiente artículo, desplazarte por un documento largo, enfocar la caja de búsqueda o activar cualquier botón con una pulsación de tecla.

El bloque básico: un escuchador de keydown

Todo sistema de atajos empieza con un escuchador en document. JustZix ejecuta tu JS una vez por carga de página, así que el escuchador se adjunta pronto y cubre toda la página.

document.addEventListener('keydown', function (e) {
  // ignorar pulsaciones mientras se escribe en un campo
  var tag = (e.target.tagName || '').toLowerCase();
  if (tag === 'input' || tag === 'textarea' || e.target.isContentEditable) {
    return;
  }
  // los atajos van aquí
});

El return temprano es importante: impide que tus atajos se disparen mientras el usuario escribe en una caja de búsqueda o un campo de comentario.

Ejemplo: desplazarse con j y k

Esto da a cualquier página el desplazamiento clásico estilo vim que usan los lectores de feeds.

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' });
  }
});

Ejemplo: saltar al enlace siguiente o anterior

Muchos sitios tienen enlaces "siguiente" y "anterior" pero ningún atajo para ellos. Asigna las teclas de flecha (con un modificador para que no choquen con el desplazamiento normal).

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();
  }
});

Mantener pulsada Alt hace la asignación segura — no interferirá con el propio comportamiento de las teclas de flecha del navegador.

Ejemplo: enfocar la caja de búsqueda con /

La tecla barra abre la búsqueda en muchos sitios grandes. Añádela en todos los demás. Llama a preventDefault() para que el carácter barra no aterrice en el campo.

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*="earch"]'
  );
  if (search) {
    e.preventDefault();
    search.focus();
  }
});

Construir un pequeño mapa de atajos

Una vez que tengas varios atajos, un objeto de búsqueda mantiene la regla ordenada. Cada tecla se asigna a una función.

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();
});

Consejos

• Salta siempre los campos de entrada, o tus atajos secuestrarán la escritura.
• Usa un modificador (Alt, Ctrl) para acciones destructivas como recargar para que no puedas activarlas por accidente.
• Comprueba e.key en lugar del obsoleto e.keyCode — es legible y estable.
• Limita la regla por sitio si los atajos solo tienen sentido ahí.

Consulta ejemplos resueltos en los ejemplos listos para usar, o descarga JustZix para añadirlo a tu navegador. Para convertir las acciones frecuentes en botones de barra de herramientas en su lugar, lee botones de copiar como markdown y limpiar URL.