跳到主要内容
前端术语库

行内编辑

Inline Edit

交互模式也叫:就地编辑、原地编辑、单元格编辑

一句话:直接在显示内容的位置点击修改,不用跳转页面或打开弹窗,改完按回车或点击外面即可保存。

详细解释

行内编辑常见于表格单元格、文档标题、标签名、个人资料字段。平时显示为普通文字,悬停时出现浅色背景或小铅笔图标提示可编辑,点击后原地变成输入框,按回车或失去焦点时保存,按 Esc 取消。

和弹窗编辑相比,行内编辑适合改一两个简单字段,速度快、不打断上下文;如果要改很多字段,或者字段之间有联动,还是用弹窗、抽屉或单独的编辑页。

需要说清楚的细节:保存时机(回车、失焦还是点保存按钮)、保存中和保存失败时的样式、输入不合法时怎么提示、是否同时只允许编辑一个格子。

示例

灰度线框示意,只表达结构,不代表具体视觉风格。

怎么跟 AI 说

可以直接贴给 Cursor、Claude Code 等工具,把里面的业务内容换成你自己的。

表格的「备注」列支持行内编辑:悬停单元格时显示浅灰背景和铅笔图标,点击后变成输入框并自动聚焦;按回车或点击外部保存,按 Esc 取消并恢复原值;保存中在右侧显示小加载图标,失败时恢复原值并提示。