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

      • 行内编辑文本

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

      实时预览
      发布说明

      用法

      <div class="editable-text">
  <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="标题" /><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>

      独立控制器

      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

      产品边界

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

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

      可访问性

      编辑、保存与取消均可由键盘完成。Escape 恢复原值，提交失败保留输入和焦点，状态变化不会造成布局跳跃。