← Все статьи

Типы действий

INPUT: однострочное действие как мини командная строка на панели действий JustZix

15 мая 2026 · автор JustZix Team

TEXTAREA — это блокнот: Enter оставляет перенос строки, код запускается при blur. INPUT — наоборот — Enter активирует код немедленно. Это делает его «мини командной строкой» — печатаешь что-то, Enter, действие происходит. Лёгкий, однострочный, идеально интегрируется в панель действий рядом с BUTTON и SLIDER.

Чем отличается от TEXTAREA и SLIDER?

Самое важное: Enter в INPUT снимает фокус + выполняет код. Тот же UX, что у Spotlight (Mac), адресной строки Chrome, slash-команд Discord. Ментальная модель пользователя: «печатай → Enter → действие».

Первое действие INPUT

Сценарий: быстрый поиск по имени товара, с кастомной фильтрацией.

type: 'input'
label: '🔍 Search'
placeholder: 'Введи имя товара...'
defaultValue: ''
code: |
  // value — это набранный текст. После 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(`Отфильтровано: "${value}"`);

UI: текстовое поле на панели. Напечатай «iphone» + Enter → видны только товары с «iphone». Напечатай пустое + Enter → видны все.

Модель memory — что переживает F5

Идентично TEXTAREA:

1. sessionStorage (основной) — синхронное сохранение при нажатии. Ключ: jz_action_memory_{id}. Переживает F5.
2. chrome.storage.local (бэкап) — асинхронное сохранение при нажатии. Переживает «Восстановить сессию».

Сохранение при каждом нажатии, код запускается только при Enter / blur. Сохранять = часто (безопасность), выполнять = редко (эффективность).

3 цвета + placeholder

color              → фон поля
colorText          → цвет набранного текста
colorPlaceholder   → цвет placeholder (CSS-переменная --jz-placeholder-color)

Без переопределения выглядит как нативный дефолт браузера (серая рамка, белый фон, чёрный текст). Чтобы выровнять под тёмную панель действий: color=#1A1A1A, colorText=#E5E5E5, colorPlaceholder=#777.

Сценарий 1 — быстрая навигация

Командная строка «Goto» — печатаешь путь, Enter, редирект:

label: '➡️ Goto'
placeholder: '/admin/users или https://...'
code: |
  if (!value) return;
  if (value.startsWith('http')) {
    location.href = value;
  } else {
    location.pathname = value;
  }
  JUSTZIX.log(`Переход на ${value}`);

Можешь добавить горячую клавишу (Tab+Shift) для фокуса на INPUT. Никакого прерывания потока мыши.

Сценарий 2 — внедрение тега/метки

Форма регистрации требует промо-ID. Вместо запоминания: поле INPUT + автозаполнение формы после 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(`Промо применено: ${value}`);
  }

Memory помогает: в следующий раз на этом домене поле уже содержит промо из предыдущей сессии. Нажми Enter → переприменяет.

Сценарий 3 — кастомный парсер команд

Команды в стиле Discord: поле, распознающее префиксы команд:

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('Форма сброшена.');
  } else {
    JUSTZIX.warn(`Неизвестная команда: /${cmd}`);
  }
  // Очищаем поле после выполнения
  $el.value = '';

Это буквально мини-CLI на панели действий. $el — ссылка на input — можешь очистить его программно после команды.

Сценарий 4 — живой фильтр с debounce

Живой фильтр (при печати, не только при Enter) — требует обходного пути, потому что код INPUT запускается только при Enter/blur:

// В JS-правиле (авто-запуск на странице):
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);
});

JS-правило слушает события input на элементах JustZix data-jz-action-type='input', диспатчит свою фильтрацию с debounce. Поле кода INPUT остаётся пустым (или фолбэк на Enter).

Ловушки

• Enter активирует код — это разница vs TEXTAREA. Если пользователь печатает многострочный контент и по ошибке нажимает Enter, код запускается с неполным value. Лучшая практика: метка вроде «🔍 Search» / «➡️ Goto» сигнализирует о командной строке.
• Tab тоже активирует blur → код. Tab перемещает фокус на следующий элемент, blur запускается, код работает. Может запутать, если пользователь хотел просто переместить фокус.
• Без метки/placeholder INPUT выглядит пустым. isActionRenderable для INPUT всегда возвращает true (с v2.13.7), поэтому он рендерится даже без метки. Плохой UX — placeholder это МИНИМУМ.
• $el.value vs value в контексте. value в extras — это значение НА момент вызова кода. $el.value — текущее DOM-состояние (может отличаться, если пользователь начал печатать другой текст во время async-fetch в коде).
• Перетаскивание панели заблокировано во время печати. mousedown.stopPropagation — input «захватывает» события мыши, перетаскивание панели через input не работает. Намеренно.

Что делать дальше

INPUT — это «командная строка на панели» — самый лёгкий интерактивный контрол, идеальный для быстрых воркфлоу текст → действие. Полная серия типов действий:

• BUTTON — fire-and-forget
• SELECT static vs js — выбор из списка
• TEXTAREA — многострочный блокнот
• SLIDER — нативный контроллер диапазона
• TOGGLE3 — трёхпозиционный сегментированный контрол
• window.JZ + JUSTZIX helpers — программный API

Это завершает полный справочник 6 типов действий JustZix. Если ты строишь личный QA-тулбар, теперь у тебя есть карта всех строительных блоков.

Установи JustZix — полностью бесплатно, без аккаунта, без сервера.