← All posts

Tutorials

Add custom keyboard shortcuts to any website

17 May 2026 · by JustZix Team

Some sites are built for power users with rich keyboard shortcuts. Most are not. With a JustZix JavaScript rule you can add your own shortcuts to any page — jump to the next article, scroll a long doc, focus the search box, or trigger any button with a keypress.

The building block: a keydown listener

Every shortcut system starts with one listener on document. JustZix runs your JS once per page load, so the listener attaches early and covers the whole page.

document.addEventListener('keydown', function (e) {
  // ignore keystrokes while typing in a field
  var tag = (e.target.tagName || '').toLowerCase();
  if (tag === 'input' || tag === 'textarea' || e.target.isContentEditable) {
    return;
  }
  // shortcuts go here
});

The early return is important: it stops your shortcuts from firing while the user types in a search box or comment field.

Example: scroll with j and k

This gives any page the classic vim-style scrolling that feed readers use.

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

Example: jump to next or previous link

Many sites have "next" and "previous" links but no shortcut for them. Bind the arrow keys (with a modifier so they do not clash with normal scrolling).

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

Holding Alt makes the binding safe — it will not interfere with the browser's own arrow-key behaviour.

Example: focus the search box with /

The slash key opens search on many big sites. Add it everywhere else. Call preventDefault() so the slash character does not land in the field.

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

Build a small shortcut map

Once you have several shortcuts, a lookup object keeps the rule tidy. Each key maps to a function.

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

Tips

• Always skip input fields, or your shortcuts will hijack typing.
• Use a modifier (Alt, Ctrl) for destructive actions like reload so you cannot trigger them by accident.
• Check e.key rather than the deprecated e.keyCode — it is readable and stable.
• Scope the rule per site if the shortcuts only make sense there.

See worked examples in the ready-made examples, or download JustZix to add it to your browser. To turn frequent actions into toolbar buttons instead, read copy-as-markdown and clean-URL buttons.