# 行内编辑

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

**依赖**：`zhaoui.css` 与 `zhaoui.js`（原生 HTML、CSS、JS，不需要框架或 jQuery）。

## 用法

```html
<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>
```

## 样式类

`zh-edit`、`zh-edit-view`、`zh-edit-text`

## 属性

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

## 事件

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

## 无障碍

- 点击按钮、或聚焦后按 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。