← All posts

Action types

INPUT: single-line action as a mini command bar in the JustZix action bar

15 May 2026 · by JustZix Team

TEXTAREA is a scratch pad — Enter leaves a newline, code fires on blur. INPUT is the opposite — Enter immediately triggers the code. That makes it a "mini command bar" — type something, Enter, action happens. Lightweight, single-line, integrates seamlessly into the action bar alongside BUTTONs and SLIDERs.

How does it differ from TEXTAREA and SLIDER?

Most important: Enter in INPUT releases focus + runs the code. Same UX as Spotlight (Mac), Chrome address bar, Discord slash commands. User mental model: "type → Enter → action".

First INPUT action

Use case: quick search by product name, with custom filtering.

type: 'input'
label: '🔍 Search'
placeholder: 'Type a product name...'
defaultValue: ''
code: |
  // value is the text typed in. After 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(`Filtered: "${value}"`);

UI: text field in the bar. Type "iphone" + Enter → only products with "iphone" visible. Type empty + Enter → all visible.

Memory model — what survives F5

Identical to TEXTAREA:

1. sessionStorage (primary) — sync save on keystroke. Key: jz_action_memory_{id}. Survives F5.
2. chrome.storage.local (backup) — async save on keystroke. Survives across "Restore session".

Save on every keystroke, code fires only on Enter / blur. Save = often (safety), run = rarely (efficiency).

3 colours + placeholder

color              → field background
colorText          → text colour of typed text
colorPlaceholder   → placeholder colour (CSS variable --jz-placeholder-color)

Without overrides it looks like a native browser default (grey border, white bg, black text). To match a dark action bar: color=#1A1A1A, colorText=#E5E5E5, colorPlaceholder=#777.

Use case 1 — Quick navigation

"Goto" command bar — type path, Enter, redirect:

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

You can add a keyboard rule (Tab+Shift) to focus the INPUT. No mouse flow break.

Use case 2 — Tag/label injection

A registration form requires a promo ID. Instead of remembering it: INPUT field + auto-fill the form after 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 applied: ${value}`);
  }

Memory helps: next time on this domain, the field already has the promo from the previous session. Press Enter → re-apply.

Use case 3 — Custom command parser

Discord-style commands: a field that recognises command prefixes:

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('Form reset.');
  } else {
    JUSTZIX.warn(`Unknown command: /${cmd}`);
  }
  // Clear the field after execution
  $el.value = '';

This is literally a mini-CLI in the action bar. $el is the input reference — you can programmatically clear it after a command.

Use case 4 — Live filter with debounce

Live filter (on keystroke, not just Enter) — requires a workaround, because INPUT code only runs on Enter/blur:

// In a JS rule (auto-run on the 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);
});

The JS rule listens to input events on JustZix data-jz-action-type='input' elements, dispatches its own filtering with debounce. The INPUT code field stays empty (or fallback on Enter).

Pitfalls

• Enter triggers code — that's the difference vs TEXTAREA. If a user types multi-line content and accidentally hits Enter, code fires with incomplete value. Best practice: a label like "🔍 Search" / "➡️ Goto" signals it's a command bar.
• Tab also triggers blur → code. Tab moves focus to the next element, blur fires, code runs. May be confusing if the user just wanted to move focus.
• Without label/placeholder INPUT looks empty. isActionRenderable for INPUT returns true always (since v2.13.7), so it renders even without a label. UX-bad — placeholder is a MINIMUM.
• $el.value vs value in context. value in extras is the value AT code invocation. $el.value is the current DOM state (may differ if the user started typing more text during an async fetch in code).
• Bar drag blocked during typing. mousedown.stopPropagation — the input "catches" mouse events, dragging the bar via the input doesn't work. Intentional.

What's next

INPUT is "a command bar in the bar" — the lightest interactive control, perfect for quick text → action workflows. The full action-type series:

• BUTTON — fire-and-forget
• SELECT static vs js — pick from a list
• TEXTAREA — multi-line scratch pad
• SLIDER — native range controller
• TOGGLE3 — 3-state segmented controls
• window.JZ + JUSTZIX helpers — programmatic API

That closes the full reference of the 6 JustZix action types. If you're building a personal QA toolbar, you now have a map of all the building blocks.

Install JustZix — completely free, no account, no server.