输入框
带前置图标、清除按钮、密码显示开关、搜索快捷键的文本输入。结构是 .zh-inp 包着 .zh-inp-box 和原生 input，按钮按需添加。
带行为 核心包 2 个事件
示例
代码
<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-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 清空后触发 |
样式类
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
无障碍
- 清除按钮必须有 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。