行内编辑

点击文字原地变成输入框，Enter 或失焦保存，Esc 取消。空内容不会被保存。

带行为核心包 2 个事件

示例

代码

<div class="zh-edit" id="ed" data-label="名称">
  <button type="button" class="zh-edit-view" aria-label="编辑名称：中控系统"><span class="zh-edit-text">中控系统</span><i data-i="pencil" data-s="16"></i></button>
</div>

<script>
document.getElementById('ed').addEventListener('zh:edit-save', function (e) {
  console.log(e.detail.previous, '→', e.detail.value);
});
</script>

属性

属性	用在	取值	说明
`data-label`	.zh-edit	字符串，默认「名称」	给屏幕阅读器用的字段名，用于输入框与按钮的 aria-label

事件

事件	触发于	detail	说明
`zh:edit-save`	.zh-edit	{ value, previous }	内容有变化并保存时触发（冒泡）；内容没变化不触发
`zh:edit-cancel`	.zh-edit	无	按 Esc 取消，或在空内容上失焦还原旧值时触发

样式类

zh-edit　zh-edit-view　zh-edit-text

点击按钮、或聚焦后按 F2 进入编辑
Enter 保存并把焦点还给按钮；Esc 取消；在空内容上按 Enter 会停留在输入框并标记 is-error
在空内容上直接失焦会还原旧值
按钮的 aria-label 会随保存后的新值更新（「编辑名称：新值」）

常见问题

行内编辑是什么？

点击文字原地变成输入框，Enter 或失焦保存，Esc 取消。空内容不会被保存。

怎么使用行内编辑？

先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写。

行内编辑有哪些事件？

zh:edit-save（内容有变化并保存时触发（冒泡）；内容没变化不触发）；zh:edit-cancel（按 Esc 取消，或在空内容上失焦还原旧值时触发）。

行内编辑支持键盘和读屏吗？

点击按钮、或聚焦后按 F2 进入编辑；Enter 保存并把焦点还给按钮；Esc 取消；在空内容上按 Enter 会停留在输入框并标记 is-error；在空内容上直接失焦会还原旧值。

行内编辑需要依赖框架吗？

不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。