← Alle Beiträge

Aktionstypen

INPUT: einzeilige Aktion als Mini-Befehlsleiste in der JustZix-Aktionsleiste

15 Mai 2026 · von JustZix Team

TEXTAREA ist ein Notizblock — Enter lässt einen Zeilenumbruch, der Code feuert bei blur. INPUT ist das Gegenteil — Enter löst den Code sofort aus. Das macht es zu einer „Mini-Befehlsleiste" — du tippst etwas, Enter, die Aktion passiert. Leicht, einzeilig, integriert sich nahtlos in die Aktionsleiste neben BUTTONs und SLIDERn.

Wie unterscheidet es sich von TEXTAREA und SLIDER?

Am wichtigsten: Enter in INPUT gibt den Fokus frei + führt den Code aus. Dieselbe UX wie Spotlight (Mac), die Chrome-Adressleiste, Discord-Slash-Befehle. Mentales Modell des Users: „tippen → Enter → Aktion".

Erste INPUT-Aktion

Anwendungsfall: Schnellsuche nach Produktname, mit eigenem Filtern.

type: 'input'
label: '🔍 Search'
placeholder: 'Produktnamen eingeben...'
defaultValue: ''
code: |
  // value ist der ins Feld getippte Text. Nach Enter / 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(`Gefiltert: "${value}"`);

UI: Textfeld in der Leiste. Tippe „iphone" + Enter → nur Produkte mit „iphone" sichtbar. Tippe leer + Enter → alle sichtbar.

Memory-Modell — was F5 überlebt

Identisch zu TEXTAREA:

1. sessionStorage (primär) — synchrones Speichern bei Tastendruck. Key: jz_action_memory_{id}. Überlebt F5.
2. chrome.storage.local (Backup) — asynchrones Speichern bei Tastendruck. Überlebt „Sitzung wiederherstellen".

Speichern bei jedem Tastendruck, der Code feuert nur bei Enter / blur. Speichern = oft (Sicherheit), Ausführen = selten (Effizienz).

3 Farben + placeholder

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

Ohne Overrides sieht es wie ein nativer Browser-Standard aus (grauer Rahmen, weißer Hintergrund, schwarzer Text). Um es an eine dunkle Aktionsleiste anzupassen: color=#1A1A1A, colorText=#E5E5E5, colorPlaceholder=#777.

Anwendungsfall 1 — Schnellnavigation

„Goto"-Befehlsleiste — Pfad tippen, Enter, Redirect:

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

Du kannst eine Tastatur-Regel (Tab+Shift) hinzufügen, um das INPUT zu fokussieren. Kein Bruch im Maus-Flow.

Anwendungsfall 2 — Tag/Label-Injektion

Ein Registrierungsformular verlangt eine Promo-ID. Statt sie sich zu merken: INPUT-Feld + Auto-Füllen des Formulars nach Enter:

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

Memory hilft: nächstes Mal auf dieser Domain hat das Feld bereits die Promo aus der vorigen Session. Enter drücken → erneut anwenden.

Anwendungsfall 3 — Eigener Befehls-Parser

Befehle im Discord-Stil: ein Feld, das Befehls-Präfixe erkennt:

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('Formular zurückgesetzt.');
  } else {
    JUSTZIX.warn(`Unbekannter Befehl: /${cmd}`);
  }
  // Feld nach der Ausführung leeren
  $el.value = '';

Das ist buchstäblich eine Mini-CLI in der Aktionsleiste. $el ist die Referenz auf das Input — du kannst es programmatisch nach einem Befehl leeren.

Anwendungsfall 4 — Live-Filter mit Debounce

Live-Filter (bei Tastendruck, nicht nur Enter) — erfordert einen Workaround, weil INPUT-Code nur bei Enter/blur läuft:

// In einer JS-Regel (Auto-Run auf der Seite):
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);
});

Die JS-Regel lauscht auf input-Events an JustZix-Elementen mit data-jz-action-type='input' und dispatcht ihr eigenes Filtern mit Debounce. Das INPUT-Code-Feld bleibt leer (oder Fallback bei Enter).

Fallstricke

• Enter löst den Code aus — das ist der Unterschied zu TEXTAREA. Tippt ein User mehrzeiligen Inhalt und drückt versehentlich Enter, feuert der Code mit unvollständigem value. Best Practice: ein Label wie „🔍 Search" / „➡️ Goto" signalisiert eine Befehlsleiste.
• Tab löst ebenfalls blur → Code aus. Tab verschiebt den Fokus zum nächsten Element, blur feuert, der Code läuft. Kann verwirren, wenn der User nur den Fokus verschieben wollte.
• Ohne Label/Placeholder sieht INPUT leer aus. isActionRenderable gibt für INPUT immer true zurück (seit v2.13.7), es rendert also auch ohne Label. UX-schlecht — ein Placeholder ist ein MINIMUM.
• $el.value vs value im Context. value in den Extras ist der Wert ZUM Code-Aufruf. $el.value ist der aktuelle DOM-Zustand (kann abweichen, wenn der User während eines async fetch im Code weiterzutippen begann).
• Das Ziehen der Leiste ist während des Tippens blockiert. mousedown.stopPropagation — das Input „fängt" Maus-Events, das Ziehen der Leiste über das Input funktioniert nicht. Absicht.

Wie es weitergeht

INPUT ist „eine Befehlsleiste in der Leiste" — das leichteste interaktive Control, perfekt für schnelle Text-→-Aktion-Workflows. Die vollständige Aktionstyp-Serie:

• BUTTON — Fire-and-forget
• SELECT static vs js — aus einer Liste wählen
• TEXTAREA — mehrzeiliger Notizblock
• SLIDER — nativer Range-Controller
• TOGGLE3 — 3-Zustands-Segmented-Controls
• window.JZ + JUSTZIX helpers — programmatische API

Das schließt die vollständige Referenz der 6 JustZix-Aktionstypen ab. Wenn du eine persönliche QA-Toolbar baust, hast du jetzt eine Karte aller Bausteine.

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