# 输入框

带前置图标、清除按钮、密码显示开关、搜索快捷键的文本输入。结构是 .zh-inp 包着 .zh-inp-box 和原生 input，按钮按需添加。

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

## 用法

```html
<div class="zh-inp"><span class="zh-inp-box"><i data-i="search" data-s="18" class="zh-inp-pre"></i><input class="zh-inp-el" type="text" placeholder="邮箱" aria-label="邮箱"><button type="button" class="zh-inp-btn zh-inp-clear" aria-label="清除" hidden><i data-i="x" data-s="16"></i></button></span></div>

<div class="zh-inp"><span class="zh-inp-box"><input class="zh-inp-el" type="password" value="hunter2" aria-label="密码" autocomplete="new-password"><button type="button" class="zh-inp-btn zh-inp-eye" aria-label="显示密码" aria-pressed="false"><i data-i="eye" data-s="18"></i></button></span></div>

<div class="zh-inp zh-inp-search" data-search><span class="zh-inp-box"><i data-i="search" data-s="18" class="zh-inp-pre"></i><input class="zh-inp-el" type="search" placeholder="搜索文章" aria-label="搜索" enterkeyhint="search"><button type="button" class="zh-inp-btn zh-inp-clear" aria-label="清除搜索" hidden><i data-i="x" data-s="16"></i></button></span></div>

<script>
document.querySelector('[data-search]').addEventListener('zh:search', function (e) {
  console.log('搜索：', e.detail.query);
});
</script>
```

## 样式类

`zh-inp`、`zh-inp-box`、`zh-inp-el`、`zh-inp-pre`、`zh-inp-btn`、`zh-inp-clear`、`zh-inp-eye`、`zh-inp-search`、`zh-inp-addon`、`zh-inp-suf`、`zh-inp-msg`、`zh-inp-status`

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `zh-inp-clear` | 输入框内的按钮（class） | 加 hidden 作为初始状态 | 有内容时自动显示，点击清空并让输入框获得焦点 |
| `zh-inp-eye` | password 输入框旁的按钮（class） | aria-pressed="false" | 点击在密码与明文之间切换，并同步 aria-label |
| `data-search` | .zh-inp | 无 | 搜索模式：Enter 触发搜索，Esc 清空内容 |
| `is-error / is-success` | .zh-inp | class | 错误与成功状态的外观；校验逻辑由你来写 |

## 事件

| 事件 | 触发于 | detail | 说明 |
|---|---|---|---|
| `zh:search` | .zh-inp[data-search] | { query } | 在搜索框按 Enter 时触发（冒泡），query 已去掉首尾空格 |
| `zh:search-clear` | .zh-inp[data-search] | 无 | 在有内容的搜索框按 Esc 清空后触发 |

## 无障碍

- 清除按钮必须有 aria-label（示例里已写）
- 密码开关会更新 aria-pressed 和 aria-label
- 图标按钮请保留 aria-label，前置图标是装饰性的
- 校验失败时给 input 设置 aria-invalid="true"，并把错误信息放在 .zh-inp-msg 里

## 常见问题

### 输入框是什么？

带前置图标、清除按钮、密码显示开关、搜索快捷键的文本输入。结构是 .zh-inp 包着 .zh-inp-box 和原生 input，按钮按需添加。

### 怎么使用输入框？

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

### 输入框有哪些事件？

zh:search（在搜索框按 Enter 时触发（冒泡），query 已去掉首尾空格）；zh:search-clear（在有内容的搜索框按 Esc 清空后触发）。

### 输入框支持键盘和读屏吗？

清除按钮必须有 aria-label（示例里已写）；密码开关会更新 aria-pressed 和 aria-label；图标按钮请保留 aria-label，前置图标是装饰性的。

### 输入框需要依赖框架吗？

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