← 全部文章

操作类型

TEXTAREA：动作栏里的多行记事本 —— 草稿、笔记、按域名的代码片段

15 5月 2026 · 作者 JustZix Team

INPUT 是单行的。SELECT 是从列表里选。SLIDER 是一个范围。那当你想要多行自由文本的时候 —— 因为你在测试时记 QA 笔记、在 Reddit 上写回复，或者有一段 5 行的 curl 片段想要在每次访问这个域名时都触手可及？那就用 TEXTAREA（自 v2.13.21）—— 动作栏里一个原生的 <textarea>，带按标签页持久化的 memory。

它和 INPUT 有何不同？

最重要的区别：TEXTAREA 里的回车是换行，不是代码触发。这是有意的 —— 它是个用来装文本的文本字段，不是命令栏。要执行代码：Tab（原生失焦）或点击文本框外面。

第一个 TEXTAREA 动作

在 JustZix 编辑器里给栏添加一个 TEXTAREA 动作。配置：

label: "📝 QA 笔记"
rows: 5
placeholder: "bug 描述、复现步骤..."
defaultValue: ""  (空 —— 不预填任何东西)
code: (空 —— 我们只想要一个记事本，没有动作)

访问 app.com/checkout。动作栏现在有一个文本字段。打一条笔记，F5 → 笔记回来了。在同一域名上打开一个新标签页 → 字段为空（每个标签页有自己的 memory）。关闭标签页 → 你丢失那个标签页里的文本，但如果它是唯一的标签页，chrome.storage.local 备份在下次打开时仍会保留最后的值。

三种颜色 + placeholder

和 INPUT 一样的颜色配置（两者共用 placeholder 的同一个 CSS 变量）：

color           → 文本框的背景
colorText       → 文本本身的颜色
colorPlaceholder → placeholder 的颜色（CSS 变量 --jz-placeholder-color）

不做覆盖时文本框看起来像浏览器的原生默认 —— 灰边框、白背景、黑文字。要在视觉上和动作栏的其余部分融合（例如 QA 工具栏的深色主题），设 color="#1A1A1A" + colorText="#E5E5E5" + colorPlaceholder="#888"。

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

TEXTAREA 使用混合存储（和 INPUT 完全一样）：

1. sessionStorage（主）—— 每次按键同步保存。键：jz_action_memory_{id}。在整个标签页会话期间保留值，包括 F5。
2. chrome.storage.local（备份）—— 按键时异步保存。在同一标签页上能在浏览器重启后存活（如果标签页通过「恢复会话」回来）。

每次按键都保存 —— 哪怕单个字母也会立刻落进 sessionStorage。代码只在失焦时运行。这是有意的分离：保存 = 频繁（安全），执行 = 罕见（高效）。

使用场景 1 —— 按域名的 QA 记事本

你在 3 个 staging 环境上测试一个结账流程。每个都有自己的怪癖。给一条作用域为 *staging*.app.com 的规则添加一个 TEXTAREA「QA 笔记」：

label: "🐛 QA 笔记"
rows: 8
placeholder: "你在测什么、复现步骤、错误..."

访问 staging1 → 字段带着上次的会话。编辑。访问 staging2 → 空（不同标签页 = 不同 memory）。打开 Slack 报 bug → 文本已准备好可复制，你没有在页面之间丢失它。无需 Notion、无需便签、无需 F12。

使用场景 2 —— Reddit/GitHub 评论草稿

你在 GitHub 的一个 PR 上写一条长评论。掉网 → 草稿丢了。或者「马上回来」→ 2 小时的其他浏览 → 回来 → 页面刷新了，草稿没了。用 TEXTAREA 修复：

// 在 JustZix 编辑器里 → 一条 github.com 上的规则：
label: "💬 草稿"
rows: 12
code: (空 —— 只是一个记事本)

写评论时 → 每分钟往 TEXTAREA 里复制一次。F5？sessionStorage 留着它。网络错误？sessionStorage 留着它。即便关闭标签页再重新打开（通过「恢复会话」）→ chrome.storage.local 备份回来了。

额外好处：不要在 GitHub 的文本框里写，而是在 JustZix 的 TEXTAREA 里写，然后复制。这样即便一次失败的页面加载也不会毁掉文本 —— JustZix 独立于页面而活。

使用场景 3 —— 预填的 curl 片段

你经常测同一个 API。每次都重新拼 curl。带 defaultValue 的 TEXTAREA：

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: (空 —— 你只想保留一个模板)

访问域名 → 字段里已经有 curl 模板。每个会话编辑一次（例如粘贴 token），复制到终端。这个域名上的下一个标签页 → 如果没有先前的 memory 则 defaultValue 回来，如果有则是你编辑过的版本。

使用场景 4 —— 用于注入的 JSON 片段

一段测试 JSON 配置，你把它粘到应用的文本框里。与其放在文件里，不如放在一个带失焦执行代码的 TEXTAREA 动作里：

label: "📋 测试配置"
rows: 15
code: |
  // 失焦后 —— 把 value 注入应用真正的文本框
  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('配置已注入 (' + value.length + ' 个字符)');
  }

在 JustZix 字段里编辑 JSON → Tab → 代码自动把它复制到应用真正的文本框 + 触发 input/change 事件（这样页面的框架能看到它）。无需手动复制粘贴。

坑

• 回车不触发代码。Tab 或点击别处才会。和 INPUT 不同 —— 这对用户的心智模型很重要。最佳实践：用「笔记」/「草稿」/「📝 …」这样的 label（清晰的信号「这是个文本字段，不是命令栏」）。
• rows 钳制到 1-20。更大的值被固定为 20。对非常长的内容（说明、文档），改用 JS pane（也是多行的，但在一个悬浮面板里）。
• memory 按标签页，不是全局。每个标签页有自己的 sessionStorage。要在标签页之间共享文本 —— chrome.storage.local 备份部分做到这点（在「恢复会话」时），但不是实时同步。要真正的跨标签页同步 → CSS pane / JS pane（它们有不同的模型）。
• 打字时栏的拖动被阻止。文本框上的 mousedown 阻止传播，这样你抓文本框时拖不动栏。这是有意的 —— 否则你会拖动栏而不是选择文本。
• placeholder 回退到 label。如果你不单独设置 placeholder，它显示 label。你可以两个都有 —— 例如 label「笔记」+ placeholder「在此写你的 QA 笔记...」。

接下来做什么

TEXTAREA 是动作栏里的「极简 memory」—— 没有代码、没有 UI 开销，只是一个文本框。它和其他动作类型搭配得很漂亮：JZ.value('笔记') 从另一个动作读取值（例如一个把笔记发到某处的 BUTTON），而 JZ.setValue('笔记', '') 在用完后把它清空。

另见相关文章：

• TOGGLE3 —— 带按状态代码的三态分段控件
• SLIDER —— 用于 CSS 变量的原生范围控制器
• 标签页里的迷你 IDE —— 所有窗口和动作的完整地图

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