跳到主要内容
界面图谱Interface Atlas
☰
EN
交互模式Interaction / Forms

行内编辑

Inline Editing

别名:Inline Editing行内编辑就地编辑点击变输入框原地编辑即点即改单击编辑

这是什么

页面上的文本本身即可编辑:单击把文本原位变成输入框,Enter 或失焦确认,Esc 取消, 改完所见即所得。它解决的是"小改动也要跳转完整编辑页"的问题—— 把修改成本降到一次点击,特别适合单字段的快速修订场景。

交互实验室

试一试,再决定怎么用

正在加载实验室…

✓ 适用场景

  • 文档标题、昵称等单字段的快速修改
  • 看板卡片、表格单元格的轻量修订
  • 低风险、易恢复的文本内容

✕ 不适用场景

  • 字段有复杂校验或多字段联动
  • 误触成本高的区域(缺乏明确编辑入口时)
  • 需要草稿、版本等编辑上下文的场景

常见形式

点击编辑

Click to edit

静态文本与输入框原位切换

悬停提示

Hover affordance

悬停出现虚线下划线或铅笔图标提示可编辑

确认与取消

Commit and cancel

Enter / 失焦确认,Esc 取消并还原

实现要点

contenteditablefocus outlineborder-accentaria-live

双态切换实现:非编辑态渲染 button 或带 role="button" 的文本,编辑态渲染 input/textarea 并自动聚焦、全选。Enter(多行时 Shift+Enter 换行)或失焦提交,Esc 还原; 空值回退为原文。悬停用虚线下划线提示可编辑,切换可加轻微高度过渡。

相关概念

输入框Input

用一条带边框的水平输入区收集单行文本,是表单的基本单元。 占位符提示期望格式,聚焦时高亮边框引导视线,校验失败时切换错误色 并附提示文案;可内嵌前后缀图标与清除按钮,受控管理输入值。

组件搭配使用
多行输入框Textarea

用一块可多行增长的输入区收集长文本,如简介、备注、留言与反馈。 支持手动或自动增高,常配字数统计与提交按钮;超出上限时计数变红提醒, 内容换行显示而非溢出截断。

组件搭配使用
表单校验Form Validation

在用户填写表单的过程中或提交时检查输入合法性,并把错误就地显示在对应字段旁边。 目标是让用户在离错误最近的位置、以最小的打断成本知道"哪里错了、怎么改",而不是提交后被一整个错误页打回。

交互模式相似概念
乐观界面Optimistic UI

用户操作后立即按"预计成功"更新界面,真实请求在后台进行,成功则落定, 失败则回滚到原状态并提示。它解决的是"每个操作都要转圈等服务器"的问题—— 用短暂的不确定换取零等待的流畅感,特别适合点赞、收藏这类高频轻操作。

交互模式相似概念
按钮Button

用可点击的色块触发一个明确的动作,是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作,按压时有即时的下沉反馈, 繁忙时进入加载态并禁用点击,防止重复提交。

组件搭配使用

参考来源

Markdown 版(给 Agent) · JSON