← Tutti gli articoli

Tipi di azioni

TEXTAREA: un blocco note multi-riga nella barra delle azioni — bozze, note, snippet per dominio

15 maggio 2026 · di JustZix Team

INPUT è a riga singola. SELECT è una scelta da una lista. SLIDER è un range. E quando vuoi testo libero multi-riga — perché prendi note QA durante i test, scrivi una risposta su Reddit, o hai uno snippet curl di 5 righe che vuoi a portata di mano OGNI VOLTA che visiti questo dominio? Allora usi TEXTAREA (da v2.13.21) — un <textarea> nativo nella barra delle azioni con memory persistente per scheda.

In cosa differisce da INPUT?

Differenza più importante: Invio in TEXTAREA è un a capo, non un trigger di codice. È voluto — è un campo di testo pensato per contenere testo, non una barra di comandi. Per eseguire il codice: Tab (blur nativo) o clic fuori dalla textarea.

Prima azione TEXTAREA

Nell'editor di JustZix aggiungi un'azione TEXTAREA alla barra. Configurazione:

label: "📝 Note QA"
rows: 5
placeholder: "Descrizione del bug, passi di repro..."
defaultValue: ""  (vuoto — non suggerire nulla)
code: (vuoto — vogliamo solo un blocco note, nessuna azione)

Visita app.com/checkout. La barra delle azioni ora ha un campo di testo. Digita una nota, F5 → la nota torna. Apri una nuova scheda sullo stesso dominio → campo vuoto (ogni scheda ha la propria memory). Chiudi la scheda → perdi il testo in quella scheda, ma se era l'unica scheda, il backup chrome.storage.local conserva comunque l'ultimo valore alla prossima apertura.

Tre colori + placeholder

Stessa configurazione di colori di INPUT (entrambi condividono la stessa variabile CSS per il placeholder):

color           → sfondo della textarea
colorText       → colore del testo stesso
colorPlaceholder → colore del placeholder (variabile CSS --jz-placeholder-color)

Senza override la textarea sembra un default nativo del browser — bordo grigio, sfondo bianco, testo nero. Per integrarla visivamente con il resto della barra delle azioni (es. un tema scuro per toolbar QA) imposta color="#1A1A1A" + colorText="#E5E5E5" + colorPlaceholder="#888".

Modello di memory — cosa sopravvive al F5

TEXTAREA usa uno storage ibrido (identico a INPUT):

1. sessionStorage (primario) — salvataggio sincrono a ogni battitura. Chiave: jz_action_memory_{id}. Mantiene il valore per l'intera sessione della scheda, incluso il F5.
2. chrome.storage.local (backup) — salvataggio asincrono alla battitura. Sopravvive a un riavvio del browser sulla stessa scheda (se la scheda torna tramite «Ripristina sessione»).

Salvataggio a ogni battitura — anche una singola lettera atterra subito in sessionStorage. Il codice parte solo al blur. È una separazione deliberata: salvare = spesso (sicurezza), eseguire = di rado (efficienza).

Caso d'uso 1 — Blocco note QA per dominio

Stai testando un flusso di checkout su 3 ambienti di staging. Ognuno ha le sue peculiarità. Aggiungi una TEXTAREA «Note QA» a una regola con scope *staging*.app.com:

label: "🐛 Note QA"
rows: 8
placeholder: "Cosa stai testando, passi di repro, errori..."

Visita staging1 → campo con la sessione precedente. Modifica. Visita staging2 → vuoto (scheda diversa = memory diversa). Apri Slack per segnalare il bug → il testo è pronto da copiare, non l'hai perso tra le pagine. Niente Notion, niente Sticky Notes, niente F12.

Caso d'uso 2 — Bozza di commento su Reddit/GitHub

Stai scrivendo un lungo commento su una PR di GitHub. Caduta di rete → perdi la bozza. Oppure «torno subito» → 2 ore di altra navigazione → torni → pagina aggiornata, bozza sparita. Fix con TEXTAREA:

// Nell'editor di JustZix → regola su github.com:
label: "💬 Bozza"
rows: 12
code: (vuoto — solo un blocco note)

Mentre scrivi un commento → copia nella TEXTAREA una volta al minuto. F5? sessionStorage lo tiene. Errore di rete? sessionStorage lo tiene. Anche chiudere la scheda e riaprirla (tramite «Ripristina sessione») → il backup chrome.storage.local torna.

Bonus: invece di scrivere nella textarea di GitHub, scrivi nella TEXTAREA di JustZix, poi copia. Così nemmeno un caricamento di pagina fallito distrugge il testo — JustZix vive indipendentemente dalla pagina.

Caso d'uso 3 — Snippet curl pre-compilato

Testi spesso la stessa API. Riassemblare il curl ogni volta. TEXTAREA con un defaultValue:

label: "🔧 curl"
rows: 6
defaultValue: |
  curl -X POST \
    -H "Content-Type: application/json" \
    -H "Authorization: Bearer YOUR_TOKEN" \
    -d '{"key":"value"}' \
    https://api.app.com/v1/endpoint
code: (vuoto — vuoi solo conservare un modello)

Visita il dominio → il campo ha già il modello di curl. Modifica una volta a sessione (es. incolla il token), copia nel terminale. Scheda successiva su questo dominio → defaultValue torna se non c'era memory precedente, o la tua versione modificata se c'era.

Caso d'uso 4 — Snippet JSON per l'iniezione

Una config JSON di test che incolli nella textarea dell'app. Invece di tenerla in un file, tienila in un'azione TEXTAREA con codice eseguito al blur:

label: "📋 Config di test"
rows: 15
code: |
  // Dopo il blur — inietta value nella vera textarea dell'app
  const target = document.querySelector('#config-textarea');
  if (target) {
    target.value = value;
    target.dispatchEvent(new Event('input', { bubbles: true }));
    target.dispatchEvent(new Event('change', { bubbles: true }));
    JUSTZIX.log('Config iniettata (' + value.length + ' caratteri)');
  }

Modifica il JSON nel campo JustZix → Tab → il codice lo copia automaticamente nella vera textarea dell'app + fa partire gli eventi input/change (così il framework della pagina lo vede). Niente copia-incolla manuale.

Trappole

• Invio NON attiva il codice. Tab o clic altrove sì. Diverso da INPUT — importante per il modello mentale dell'utente. Best practice: usa label come «Note» / «Bozza» / «📝 …» (segnale chiaro «questo è un campo di testo, non una barra di comandi»).
• rows fa clamp a 1-20. I valori più grandi vengono fissati a 20. Per contenuti molto lunghi (istruzioni, documenti) usa invece un JS pane (anch'esso multi-riga, ma in un pannello flottante).
• Memory per scheda, non globale. Ogni scheda ha il proprio sessionStorage. Per condividere testo tra schede — il backup chrome.storage.local lo fa in parte (al «Ripristina sessione»), ma non è sync in tempo reale. Per una vera sync tra schede → CSS pane / JS pane (hanno un modello diverso).
• Il trascinamento della barra è bloccato durante la digitazione. mousedown sulla textarea blocca la propagazione, così non puoi trascinare la barra afferrando la textarea. È voluto — trascineresti la barra invece di selezionare il testo.
• placeholder fa fallback sulla label. Se non imposti un placeholder separato, mostra la label. Puoi avere entrambi — es. label «Note» + placeholder «Scrivi qui le tue note QA...».

Cosa fare dopo

TEXTAREA è «memory minimalista» nella barra delle azioni — niente codice, niente overhead di UI, solo una textarea. Si abbina splendidamente con altri tipi di azione: JZ.value('Note') legge il valore da un'altra azione (es. un BUTTON che invia le note da qualche parte), e JZ.setValue('Note', '') la svuota dopo l'uso.

Vedi anche gli articoli correlati:

• TOGGLE3 — segmented control a 3 stati con codice per stato
• SLIDER — controller di range nativo per le variabili CSS
• Mini-IDE nella scheda — mappa completa di tutte le finestre e azioni

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