← 全部文章

操作类型

INPUT：单行动作，作为 JustZix 动作栏里的迷你命令栏

15 5月 2026 · 作者 JustZix Team

TEXTAREA 是一个记事本 —— 回车留下一个换行，代码在失焦时运行。INPUT 正相反 —— 回车立即触发代码。这让它成了一个「迷你命令栏」—— 你打点东西，回车，动作发生。轻量、单行，完美地融入动作栏，和 BUTTON、SLIDER 并排。

它和 TEXTAREA、SLIDER 有何不同？

最重要的：INPUT 里的回车释放焦点 + 执行代码。和 Spotlight（Mac）、Chrome 地址栏、Discord 斜杠命令一样的 UX。用户的心智模型：「打字 → 回车 → 动作」。

第一个 INPUT 动作

使用场景：按产品名快速搜索，带自定义过滤。

type: 'input'
label: '🔍 Search'
placeholder: '输入产品名称...'
defaultValue: ''
code: |
  // value 是打入的文本。在回车 / 失焦之后。
  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」+ 回车 → 只有含「iphone」的产品可见。打空 + 回车 → 全部可见。

memory 模型 —— 什么能在 F5 后存活

和 TEXTAREA 完全一样：

1. sessionStorage（主）—— 按键时同步保存。键：jz_action_memory_{id}。能在 F5 后存活。
2. chrome.storage.local（备份）—— 按键时异步保存。能在「恢复会话」后存活。

每次按键都保存，代码只在回车 / 失焦时运行。保存 = 频繁（安全），执行 = 罕见（高效）。

3 种颜色 + placeholder

color              → 字段的背景
colorText          → 打入文本的颜色
colorPlaceholder   → placeholder 的颜色（CSS 变量 --jz-placeholder-color）

不做覆盖时它看起来像浏览器的原生默认（灰边框、白背景、黑文字）。要把它对齐到一个深色动作栏：color=#1A1A1A，colorText=#E5E5E5，colorPlaceholder=#777。

使用场景 1 —— 快速导航

命令栏「Goto」—— 你打一个路径，回车，重定向：

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 字段 + 回车后自动填表单：

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 有帮助：下次在这个域名上字段里已经有上次会话的促销码。按回车 → 重新应用。

使用场景 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 —— 带防抖的实时过滤

实时过滤（边打字边过滤，而不只在回车时）—— 需要一个变通，因为 INPUT 代码只在回车/失焦时运行：

// 在一条 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 规则在 data-jz-action-type='input' 的 JustZix 元素上监听 input 事件，派发它自己带防抖的过滤。INPUT 的代码字段保持为空（或回退到回车）。

坑

• 回车触发代码 —— 这是和 TEXTAREA 的区别。如果用户打多行内容并不小心按了回车，代码会带着不完整的 value 运行。最佳实践：用「🔍 Search」/「➡️ Goto」这样的 label 来表明这是个命令栏。
• Tab 也会触发失焦 → 代码。Tab 把焦点移到下一个元素，失焦发生，代码运行。如果用户只是想移动焦点，这可能让人困惑。
• 没有 label/placeholder 时 INPUT 看起来是空的。isActionRenderable 对 INPUT 总是返回 true（自 v2.13.7），所以它即便没有 label 也会渲染。UX 不佳 —— 一个 placeholder 是底线。
• $el.value vs 上下文里的 value。extra 里的 value 是代码被调用那一刻的值。$el.value 是当前的 DOM 状态（如果用户在代码里的 async fetch 期间开始打别的文本，两者可能不同）。
• 打字时栏的拖动被阻止。mousedown.stopPropagation —— input「捕获」鼠标事件，通过 input 拖动栏不起作用。这是有意的。

接下来做什么

INPUT 是「栏里的一个命令栏」—— 最轻量的交互控件，完美适合快速的文本 → 动作工作流。完整的动作类型系列：

• BUTTON —— 触发即忘
• SELECT static vs js —— 从列表里选择
• TEXTAREA —— 多行记事本
• SLIDER —— 原生范围控制器
• TOGGLE3 —— 三态分段控件
• window.JZ + JUSTZIX 辅助函数 —— 程序化 API

这结束了 JustZix 6 种动作类型的完整参考。如果你在搭建一个个人 QA 工具栏，现在你有了所有积木的地图。

安装 JustZix —— 完全免费，无需账号，没有服务器。