← Tutti gli articoli

Tipi di azioni

INPUT: azione a riga singola come mini barra di comandi nella barra delle azioni di JustZix

15 maggio 2026 · di JustZix Team

TEXTAREA è un blocco note — Invio lascia un a capo, il codice parte al blur. INPUT è l'opposto — Invio attiva il codice immediatamente. Questo lo rende una «mini barra di comandi» — digiti qualcosa, Invio, l'azione accade. Leggero, a riga singola, si integra perfettamente nella barra delle azioni accanto a BUTTON e SLIDER.

In cosa differisce da TEXTAREA e SLIDER?

Il più importante: Invio in INPUT rilascia il focus + esegue il codice. Stessa UX di Spotlight (Mac), la barra degli indirizzi di Chrome, gli slash command di Discord. Modello mentale dell'utente: «digita → Invio → azione».

Prima azione INPUT

Caso d'uso: ricerca rapida per nome di prodotto, con filtraggio personalizzato.

type: 'input'
label: '🔍 Search'
placeholder: 'Digita un nome di prodotto...'
defaultValue: ''
code: |
  // value è il testo digitato. Dopo Invio / 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(`Filtrato: "${value}"`);

UI: campo di testo nella barra. Digita «iphone» + Invio → solo i prodotti con «iphone» visibili. Digita vuoto + Invio → tutti visibili.

Modello di memory — cosa sopravvive al F5

Identico a TEXTAREA:

1. sessionStorage (primario) — salvataggio sincrono alla battitura. Chiave: jz_action_memory_{id}. Sopravvive al F5.
2. chrome.storage.local (backup) — salvataggio asincrono alla battitura. Sopravvive a «Ripristina sessione».

Salvataggio a ogni battitura, il codice parte solo a Invio / blur. Salvare = spesso (sicurezza), eseguire = di rado (efficienza).

3 colori + placeholder

color              → sfondo del campo
colorText          → colore del testo digitato
colorPlaceholder   → colore del placeholder (variabile CSS --jz-placeholder-color)

Senza override sembra un default nativo del browser (bordo grigio, sfondo bianco, testo nero). Per allinearlo a una barra delle azioni scura: color=#1A1A1A, colorText=#E5E5E5, colorPlaceholder=#777.

Caso d'uso 1 — Navigazione rapida

Barra di comandi «Goto» — digiti un percorso, Invio, redirect:

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

Puoi aggiungere una regola da tastiera (Tab+Shift) per mettere il focus sull'INPUT. Nessuna interruzione del flusso del mouse.

Caso d'uso 2 — Iniezione di tag/label

Un modulo di registrazione richiede un ID promo. Invece di ricordarlo: campo INPUT + auto-riempimento del modulo dopo Invio:

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 applicata: ${value}`);
  }

La memory aiuta: la prossima volta su questo dominio il campo ha già la promo dalla sessione precedente. Premi Invio → ri-applica.

Caso d'uso 3 — Parser di comandi personalizzato

Comandi in stile Discord: un campo che riconosce i prefissi dei comandi:

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('Modulo resettato.');
  } else {
    JUSTZIX.warn(`Comando sconosciuto: /${cmd}`);
  }
  // Svuota il campo dopo l'esecuzione
  $el.value = '';

È letteralmente una mini-CLI nella barra delle azioni. $el è il riferimento all'input — puoi svuotarlo programmaticamente dopo un comando.

Caso d'uso 4 — Filtro dal vivo con debounce

Filtro dal vivo (alla battitura, non solo a Invio) — richiede un workaround, perché il codice INPUT gira solo a Invio/blur:

// In una regola JS (auto-run sulla pagina):
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 regola JS ascolta gli eventi input sugli elementi JustZix data-jz-action-type='input', fa dispatch del proprio filtraggio con debounce. Il campo del codice di INPUT resta vuoto (o fallback a Invio).

Trappole

• Invio attiva il codice — è la differenza vs TEXTAREA. Se un utente digita contenuto multi-riga e preme Invio per sbaglio, il codice parte con un value incompleto. Best practice: una label come «🔍 Search» / «➡️ Goto» segnala una barra di comandi.
• Anche Tab attiva blur → codice. Tab sposta il focus all'elemento successivo, blur parte, il codice gira. Può confondere se l'utente voleva solo spostare il focus.
• Senza label/placeholder INPUT sembra vuoto. isActionRenderable per INPUT restituisce sempre true (da v2.13.7), quindi si renderizza anche senza label. UX-cattiva — un placeholder è un MINIMO.
• $el.value vs value nel contesto. value negli extra è il valore AL momento dell'invocazione del codice. $el.value è lo stato DOM attuale (può differire se l'utente ha iniziato a digitare altro testo durante un fetch async nel codice).
• Il trascinamento della barra è bloccato durante la digitazione. mousedown.stopPropagation — l'input «cattura» gli eventi del mouse, trascinare la barra tramite l'input non funziona. Voluto.

Cosa fare dopo

INPUT è «una barra di comandi nella barra» — il controllo interattivo più leggero, perfetto per workflow rapidi testo → azione. La serie completa dei tipi di azione:

• BUTTON — fire-and-forget
• SELECT static vs js — scegliere da una lista
• TEXTAREA — blocco note multi-riga
• SLIDER — controller di range nativo
• TOGGLE3 — segmented control a 3 stati
• window.JZ + JUSTZIX helpers — API programmatica

Questo chiude la referenza completa dei 6 tipi di azione di JustZix. Se stai costruendo una toolbar QA personale, ora hai una mappa di tutti i mattoncini.

Installa JustZix — completamente gratuito, senza account, senza server.