← Tous les exemples

JavaScript Productivité news.ycombinator.com

Hacker News : navigation clavier j/k

Permet de passer d'un commentaire ou article à l'autre avec j et k en surlignant l'élément courant.

Code à copier

// Navigate between comments with the j and k keys
(function () {
  const items = Array.prototype.slice.call(
    document.querySelectorAll('.comtr, .athing')
  );
  if (!items.length) { return; }
  let idx = -1;
  function focus(n) {
    if (n < 0 || n >= items.length) { return; }
    idx = n;
    const el = items[idx];
    el.scrollIntoView({ block: 'center', behavior: 'smooth' });
    items.forEach(function (i) { i.style.outline = ''; });
    el.style.outline = '2px solid #ff6600';
  }
  document.addEventListener('keydown', function (e) {
    const t = e.target.tagName;
    if (t === 'INPUT' || t === 'TEXTAREA') { return; }
    if (e.key === 'j') { focus(idx + 1); }
    else if (e.key === 'k') { focus(idx - 1); }
  });
})();

Comment utiliser cet exemple

  1. Copiez le code avec le bouton ci-dessus.
  2. Installez JustZix (2 minutes) et ouvrez l'extension sur la page cible.
  3. Ajoutez une nouvelle règle correspondant à cette page.
  4. Collez le code dans le panneau JavaScript de la règle et enregistrez — il s'exécute à chaque visite de page.

Notez cet exemple

Aucune note — soyez le premier.

Cet exemple fonctionne-t-il ?

Les snippets sont inutiles sans un endroit où les coller.

JustZix s'installe en 2 minutes et exécute votre code sur chaque page correspondante. Sans compte, sans paiement.

Télécharger gratuitement Voir les cas d'usage