← Tous les articles

Types d'actions

INPUT : action sur une ligne comme mini barre de commande dans la barre d'actions JustZix

15 mai 2026 · par JustZix Team

TEXTAREA est un bloc-notes — Entrée laisse un saut de ligne, le code se déclenche au blur. INPUT est l'inverse — Entrée déclenche le code immédiatement. Cela en fait une « mini barre de commande » — vous tapez quelque chose, Entrée, l'action se produit. Léger, sur une ligne, s'intègre parfaitement dans la barre d'actions aux côtés des BUTTONs et des SLIDERs.

En quoi diffère-t-il de TEXTAREA et SLIDER ?

Le plus important : Entrée dans INPUT relâche le focus + exécute le code. Même UX que Spotlight (Mac), la barre d'adresse de Chrome, les slash commands de Discord. Modèle mental de l'utilisateur : « taper → Entrée → action ».

Première action INPUT

Cas d'usage : recherche rapide par nom de produit, avec un filtrage personnalisé.

type: 'input'
label: '🔍 Search'
placeholder: 'Tapez un nom de produit...'
defaultValue: ''
code: |
  // value est le texte tapé. Après Entrée / blur.
  if (!value || value.length < 2) {
    document.querySelectorAll('.product').forEach(p => p.style.display = '');
    return;
  }
  const q = value.toLowerCase();
  document.querySelectorAll('.product').forEach(p => {
    const text = p.textContent.toLowerCase();
    p.style.display = text.includes(q) ? '' : 'none';
  });
  JUSTZIX.log(`Filtré : "${value}"`);

UI : champ texte dans la barre. Tapez « iphone » + Entrée → seuls les produits avec « iphone » visibles. Tapez vide + Entrée → tous visibles.

Modèle de mémoire — ce qui survit au F5

Identique à TEXTAREA :

1. sessionStorage (primaire) — sauvegarde synchrone à la frappe. Clé : jz_action_memory_{id}. Survit au F5.
2. chrome.storage.local (backup) — sauvegarde asynchrone à la frappe. Survit à « Restaurer la session ».

Sauvegarde à chaque frappe, le code ne se déclenche qu'à Entrée / blur. Sauvegarder = souvent (sécurité), exécuter = rarement (efficacité).

3 couleurs + placeholder

color              → fond du champ
colorText          → couleur du texte saisi
colorPlaceholder   → couleur du placeholder (variable CSS --jz-placeholder-color)

Sans overrides, il ressemble à un défaut natif du navigateur (bordure grise, fond blanc, texte noir). Pour l'aligner sur une barre d'actions sombre : color=#1A1A1A, colorText=#E5E5E5, colorPlaceholder=#777.

Cas d'usage 1 — Navigation rapide

Barre de commande « Goto » — tapez un chemin, Entrée, redirect :

label: '➡️ Goto'
placeholder: '/admin/users ou https://...'
code: |
  if (!value) return;
  if (value.startsWith('http')) {
    location.href = value;
  } else {
    location.pathname = value;
  }
  JUSTZIX.log(`Navigué vers ${value}`);

Vous pouvez ajouter une règle clavier (Tab+Shift) pour focaliser l'INPUT. Pas de rupture du flux à la souris.

Cas d'usage 2 — Injection de tag/label

Un formulaire d'inscription exige un ID promo. Au lieu de le mémoriser : champ INPUT + auto-remplissage du formulaire après Entrée :

label: '🎟️ Promo'
placeholder: 'PROMO2025...'
defaultValue: ''
code: |
  if (!value) return;
  const promoField = document.querySelector('input[name=promo_code]');
  if (promoField) {
    promoField.value = value;
    promoField.dispatchEvent(new Event('input', { bubbles: true }));
    promoField.dispatchEvent(new Event('change', { bubbles: true }));
    JUSTZIX.log(`Promo appliquée : ${value}`);
  }

La mémoire aide : la prochaine fois sur ce domaine, le champ a déjà la promo de la session précédente. Appuyez sur Entrée → ré-appliquer.

Cas d'usage 3 — Parser de commandes personnalisé

Commandes à la Discord : un champ qui reconnaît les préfixes de commande :

label: '/ Command'
placeholder: '/login, /addCart, /reset...'
code: |
  if (!value || !value.startsWith('/')) return;
  const parts = value.slice(1).split(' ');
  const cmd = parts[0];
  const args = parts.slice(1).join(' ');

  if (cmd === 'login') {
    JZ.click('Login');
  } else if (cmd === 'addCart' && args) {
    document.querySelector(`[data-product="${args}"] .add`)?.click();
  } else if (cmd === 'reset') {
    document.querySelectorAll('input').forEach(i => i.value = '');
    JUSTZIX.log('Formulaire réinitialisé.');
  } else {
    JUSTZIX.warn(`Commande inconnue : /${cmd}`);
  }
  // Vider le champ après l'exécution
  $el.value = '';

C'est littéralement une mini-CLI dans la barre d'actions. $el est la référence à l'input — vous pouvez le vider programmatiquement après une commande.

Cas d'usage 4 — Filtre en direct avec debounce

Filtre en direct (à la frappe, pas seulement à Entrée) — nécessite un contournement, car le code INPUT ne tourne qu'à Entrée/blur :

// Dans une règle JS (auto-run sur la page) :
let debounce;
document.addEventListener('input', (e) => {
  if (e.target.dataset.jzActionType !== 'input') return;
  if (e.target.dataset.jzLabel !== 'Filter') return;
  clearTimeout(debounce);
  debounce = setTimeout(() => {
    const q = e.target.value.toLowerCase();
    document.querySelectorAll('.item').forEach(it => {
      it.style.display = it.textContent.toLowerCase().includes(q) ? '' : 'none';
    });
  }, 200);
});

La règle JS écoute les events input sur les éléments JustZix data-jz-action-type='input', dispatche son propre filtrage avec debounce. Le champ code de l'INPUT reste vide (ou fallback à Entrée).

Pièges

• Entrée déclenche le code — c'est la différence vs TEXTAREA. Si un utilisateur tape du contenu multi-lignes et appuie accidentellement sur Entrée, le code se déclenche avec une value incomplète. Bonne pratique : un label comme « 🔍 Search » / « ➡️ Goto » signale une barre de commande.
• Tab déclenche aussi blur → code. Tab déplace le focus vers l'élément suivant, blur se déclenche, le code tourne. Peut dérouter si l'utilisateur voulait juste déplacer le focus.
• Sans label/placeholder, INPUT semble vide. isActionRenderable pour INPUT retourne toujours true (depuis v2.13.7), il se rend donc même sans label. Mauvaise UX — un placeholder est un MINIMUM.
• $el.value vs value dans le contexte. value dans les extras est la valeur AU moment de l'invocation du code. $el.value est l'état DOM actuel (peut différer si l'utilisateur a commencé à taper plus de texte pendant un fetch async dans le code).
• Le glissement de la barre est bloqué pendant la saisie. mousedown.stopPropagation — l'input « attrape » les events souris, glisser la barre via l'input ne fonctionne pas. Intentionnel.

La suite

INPUT est « une barre de commande dans la barre » — le contrôle interactif le plus léger, parfait pour les workflows rapides texte → action. La série complète des types d'actions :

• BUTTON — fire-and-forget
• SELECT static vs js — choisir dans une liste
• TEXTAREA — bloc-notes multi-lignes
• SLIDER — contrôleur de plage natif
• TOGGLE3 — segmented controls à 3 états
• window.JZ + JUSTZIX helpers — API programmatique

Cela clôt la référence complète des 6 types d'actions JustZix. Si vous construisez une toolbar QA personnelle, vous avez maintenant une carte de tous les blocs de construction.

Installez JustZix — entièrement gratuit, sans compte, sans serveur.