For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/components/editable-text.md.
A3S UI
  • 简体中文
  • next

      • 行内编辑文本

      在读取上下文中安全地切换到短文本编辑，并保留保存、取消、校验和焦点返回路径。

      发布标题
      发布说明

      先阅读标题，仅在文案必须变更时再进入编辑。

      用法

      <div
  class="editable-text"
  data-editable-required
  data-editable-save-delay="1200"
>
  <div data-editable-display>
    <span data-editable-value>发布说明</span>
    <button type="button" class="btn" data-size="sm" data-variant="ghost" data-editable-action="edit">编辑</button>
  </div>
  <form data-editable-form>
    <input class="input" value="发布说明" aria-label="标题" maxlength="80" />
    <button type="submit" class="btn" data-size="sm" data-editable-action="save">保存</button>
    <button type="button" class="btn" data-size="sm" data-variant="ghost" data-editable-action="cancel">取消</button>
  </form>
</div>

      data-editable-required 会把空提交拒绝为 error 并设置 aria-invalid。data-editable-save-delay 在延迟结束前保持 saving / aria-busy，避免重复编辑与首次接受竞态。

      独立控制器

      import "@a3s-lab/ui/runtime";
import "@a3s-lab/ui/editable-text";

const component = document.querySelector(".editable-text");
component.getState();

      控制器是幂等的；完整包可改为一次导入 @a3s-lab/ui/all。宿主通过可取消的 before-* 事件执行权限与业务校验。

      契约

      接口值
      根选择器.editable-text
      原生根元素<div>
      状态display, editing, saving, error, disabled
      事件a3s:editable-text-before-commit, a3s:editable-text-cancel, a3s:editable-text-change, a3s:editable-text-edit
      方法beginEdit, cancel, commit, getState, setValue
      宿主属性data-editable-required, data-editable-save-delay

      产品边界

      行内编辑只适合单个低风险值。多字段编辑、长内容、受保护操作或需要审批的变更应进入完整表单或对话流程。

      组件只发布可复用的交互边界。数据获取、持久化、权限、可信内容与业务实体继续由宿主产品拥有。

      无障碍

      编辑、保存与取消均可键盘到达。Escape 恢复原值并把焦点返回到「编辑」。必填空提交停留在 error 并带 aria-invalid。当 aria-busy="true" 时字段保持禁用，避免重复保存与首次接受竞态。