← Alle Beiträge

Aktionstypen

TEXTAREA: ein mehrzeiliger Notizblock in der Aktionsleiste — Entwürfe, Notizen, Snippets pro Domain

15 Mai 2026 · von JustZix Team

INPUT ist einzeilig. SELECT ist eine Auswahl aus einer Liste. SLIDER ist ein Bereich. Was, wenn du freien mehrzeiligen Text willst — weil du beim Testen QA-Notizen machst, eine Reddit-Antwort entwirfst oder ein 5-zeiliges curl-Snippet zur Hand haben willst, WANN IMMER du diese Domain besuchst? Dann nutzt du TEXTAREA (seit v2.13.21) — ein natives <textarea> in der Aktionsleiste mit persistenter Memory pro Tab.

Wie unterscheidet es sich von INPUT?

Wichtigster Unterschied: Enter in TEXTAREA ist ein Zeilenumbruch, kein Code-Auslöser. Das ist Absicht — das ist ein Textfeld, das Text halten soll, keine Befehlsleiste. Zum Ausführen des Codes: Tab (nativer blur) oder Klick außerhalb der Textarea.

Erste TEXTAREA-Aktion

Füge im JustZix-Editor eine TEXTAREA-Aktion zur Leiste hinzu. Konfiguration:

label: "📝 QA-Notizen"
rows: 5
placeholder: "Fehlerbeschreibung, Repro-Schritte..."
defaultValue: ""  (leer — nichts vorschlagen)
code: (leer — wir wollen nur einen Notizblock, keine Aktion)

Besuche app.com/checkout. Die Aktionsleiste hat nun ein Textfeld. Tippe eine Notiz, F5 → die Notiz kommt zurück. Öffne einen neuen Tab auf derselben Domain → leeres Feld (jeder Tab hat seine eigene Memory). Schließe den Tab → du verlierst den Text in diesem Tab, aber war es der einzige Tab, behält das chrome.storage.local-Backup beim nächsten Öffnen weiterhin den letzten Wert.

Drei Farben + placeholder

Dieselbe Farbkonfiguration wie bei INPUT (beide teilen sich dieselbe CSS-Variable für den placeholder):

color           → Textarea-Hintergrund
colorText       → Textfarbe des Textes selbst
colorPlaceholder → Placeholder-Farbe (CSS-Variable --jz-placeholder-color)

Ohne Overrides sieht die Textarea wie ein nativer Browser-Standard aus — grauer Rahmen, weißer Hintergrund, schwarzer Text. Um sie visuell mit dem Rest der Aktionsleiste zu integrieren (z. B. ein dunkles QA-Toolbar-Theme) setze color="#1A1A1A" + colorText="#E5E5E5" + colorPlaceholder="#888".

Memory-Modell — was F5 überlebt

TEXTAREA nutzt hybriden Speicher (identisch zu INPUT):

1. sessionStorage (primär) — synchrones Speichern bei jedem Tastendruck. Key: jz_action_memory_{id}. Behält den Wert für die gesamte Tab-Session, inklusive F5.
2. chrome.storage.local (Backup) — asynchrones Speichern bei Tastendruck. Überlebt einen Browser-Neustart auf demselben Tab (wenn der Tab über „Sitzung wiederherstellen" zurückkommt).

Speichern bei jedem Tastendruck — schon ein einzelner Buchstabe landet sofort im sessionStorage. Der Code feuert nur bei blur. Das ist eine bewusste Trennung: Speichern = oft (Sicherheit), Ausführen = selten (Effizienz).

Anwendungsfall 1 — QA-Notizblock pro Domain

Du testest einen Checkout-Flow auf 3 Staging-Umgebungen. Jede hat ihre eigenen Eigenheiten. Füge eine TEXTAREA „QA-Notizen" zu einer Regel mit Scope *staging*.app.com hinzu:

label: "🐛 QA-Notizen"
rows: 8
placeholder: "Was du testest, Repro-Schritte, Fehler..."

Besuche staging1 → Feld mit der vorigen Session. Bearbeite. Besuche staging2 → leer (anderer Tab = andere Memory). Öffne Slack, um den Bug zu melden → der Text ist zum Kopieren bereit, du hast ihn zwischen den Seiten nicht verloren. Kein Notion, keine Sticky Notes, kein F12.

Anwendungsfall 2 — Kommentar-Entwurf auf Reddit/GitHub

Du schreibst einen langen Kommentar zu einem GitHub-PR. Netzwerkausfall → du verlierst den Entwurf. Oder „bin gleich zurück" → 2 Stunden anderes Surfen → du kommst zurück → Seite aktualisiert, Entwurf weg. TEXTAREA-Fix:

// Im JustZix-Editor → Regel auf github.com:
label: "💬 Entwurf"
rows: 12
code: (leer — nur ein Notizblock)

Beim Schreiben eines Kommentars → einmal pro Minute in die TEXTAREA kopieren. F5? sessionStorage hält ihn. Netzwerkfehler? sessionStorage hält ihn. Selbst Tab schließen und wieder öffnen (über „Sitzung wiederherstellen") → das chrome.storage.local-Backup kommt zurück.

Bonus: Statt in GitHubs Textarea zu schreiben, schreibe in der JustZix-TEXTAREA und kopiere dann. Dann zerstört selbst ein fehlgeschlagener Seitenladevorgang den Text nicht — JustZix lebt unabhängig von der Seite.

Anwendungsfall 3 — Vorausgefülltes curl-Snippet

Du testest oft dieselbe API. Jedes Mal den curl neu zusammenbauen. TEXTAREA mit einem 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: (leer — du willst nur eine Vorlage halten)

Besuche die Domain → das Feld hat bereits die curl-Vorlage. Bearbeite einmal pro Session (z. B. den Token einfügen), kopiere ins Terminal. Nächster Tab auf dieser Domain → defaultValue kommt zurück, wenn es keine vorherige Memory gab, oder deine geänderte Version, wenn doch.

Anwendungsfall 4 — JSON-Snippet zur Injektion

Eine Test-JSON-Config, die du in die Textarea der App einfügst. Statt sie in einer Datei zu halten, halte sie in einer TEXTAREA-Aktion mit blur-gefeuertem Code:

label: "📋 Test-Config"
rows: 15
code: |
  // Nach blur — injiziert value in die echte Textarea der 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 injiziert (' + value.length + ' Zeichen)');
  }

Bearbeite JSON im JustZix-Feld → Tab → der Code kopiert es automatisch in die echte Textarea der App + feuert input/change-Events (damit das Framework der Seite es sieht). Kein manuelles Copy-Paste.

Fallstricke

• Enter löst den Code NICHT aus. Tab oder Klick anderswo schon. Anders als bei INPUT — wichtig für das mentale Modell des Users. Best Practice: nutze Labels wie „Notizen" / „Entwurf" / „📝 …" (klares Signal „das ist ein Textfeld, keine Befehlsleiste").
• rows clampt auf 1-20. Größere Werte werden auf 20 festgesetzt. Für sehr langen Inhalt (Anleitungen, Docs) nutze stattdessen ein JS pane (auch mehrzeilig, aber in einem schwebenden Panel).
• Memory pro Tab, nicht global. Jeder Tab hat sein eigenes sessionStorage. Um Text über Tabs hinweg zu teilen — das chrome.storage.local-Backup macht das teilweise (bei „Sitzung wiederherstellen"), aber kein Echtzeit-Sync. Für echte tabübergreifende Synchronisation → CSS pane / JS pane (sie haben ein anderes Modell).
• Das Ziehen der Leiste ist während des Tippens blockiert. mousedown auf der Textarea blockiert die Propagation, sodass du die Leiste nicht durch Greifen der Textarea ziehen kannst. Das ist Absicht — du würdest die Leiste ziehen, statt Text zu markieren.
• placeholder fällt auf das label zurück. Wenn du keinen separaten placeholder setzt, zeigt es das label. Du kannst beides haben — z. B. label „Notizen" + placeholder „Gib hier deine QA-Notizen ein...".

Wie es weitergeht

TEXTAREA ist „minimalistische Memory" in der Aktionsleiste — kein Code, kein UI-Overhead, nur eine Textarea. Sie passt wunderbar zu anderen Aktionstypen: JZ.value('Notizen') liest den Wert aus einer anderen Aktion (z. B. ein BUTTON, der Notizen irgendwohin sendet), und JZ.setValue('Notizen', '') leert sie nach Gebrauch.

Sieh dir auch Verwandtes an:

• TOGGLE3 — 3-Zustands-Segmented-Controls mit Code pro Zustand
• SLIDER — nativer Range-Controller für CSS-Variablen
• Mini-IDE im Tab — vollständige Karte aller Fenster und Aktionen

Installiere JustZix — komplett kostenlos, kein Konto, kein Server.