行内编辑
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 还原; 空值回退为原文。悬停用虚线下划线提示可编辑,切换可加轻微高度过渡。
相关概念
用一条带边框的水平输入区收集单行文本,是表单的基本单元。 占位符提示期望格式,聚焦时高亮边框引导视线,校验失败时切换错误色 并附提示文案;可内嵌前后缀图标与清除按钮,受控管理输入值。
组件搭配使用用一块可多行增长的输入区收集长文本,如简介、备注、留言与反馈。 支持手动或自动增高,常配字数统计与提交按钮;超出上限时计数变红提醒, 内容换行显示而非溢出截断。
组件搭配使用在用户填写表单的过程中或提交时检查输入合法性,并把错误就地显示在对应字段旁边。 目标是让用户在离错误最近的位置、以最小的打断成本知道"哪里错了、怎么改",而不是提交后被一整个错误页打回。
交互模式相似概念用户操作后立即按"预计成功"更新界面,真实请求在后台进行,成功则落定, 失败则回滚到原状态并提示。它解决的是"每个操作都要转圈等服务器"的问题—— 用短暂的不确定换取零等待的流畅感,特别适合点赞、收藏这类高频轻操作。
交互模式相似概念用可点击的色块触发一个明确的动作,是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作,按压时有即时的下沉反馈, 繁忙时进入加载态并禁用点击,防止重复提交。
组件搭配使用