数字步进器
带加减按钮的数字输入，支持范围、步长、小数位数，键盘可操作，按住按钮连续加减。
带行为 核心包 1 个事件
示例
代码
<div class="zh-inp zh-num" id="qty" data-min="1" data-max="10" data-step="1">
<button type="button" class="zh-num-btn" data-dir="-1" aria-label="减少" tabindex="-1"><i data-i="minus" data-s="16"></i></button>
<input class="zh-inp-el" role="spinbutton" inputmode="numeric" value="3" aria-label="数量">
<button type="button" class="zh-num-btn" data-dir="1" aria-label="增加" tabindex="-1"><i data-i="plus" data-s="16"></i></button>
</div>
<div class="zh-inp zh-num" data-min="0" data-max="9999" data-step="0.5" data-precision="2">
<button type="button" class="zh-num-btn" data-dir="-1" aria-label="减少" tabindex="-1"><i data-i="minus" data-s="16"></i></button>
<input class="zh-inp-el" role="spinbutton" inputmode="decimal" value="12.50" aria-label="金额">
<button type="button" class="zh-num-btn" data-dir="1" aria-label="增加" tabindex="-1"><i data-i="plus" data-s="16"></i></button>
</div>
<script>
document.getElementById('qty').addEventListener('zh:number', function (e) {
console.log(e.detail.value);
});
</script>属性
| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
data-min | .zh-num | 数字 | 最小值，不写则不限 |
data-max | .zh-num | 数字 | 最大值，不写则不限 |
data-step | .zh-num | 数字，默认 1 | 每次加减的步长 |
data-precision | .zh-num | 整数 | 小数位数；不写则按步长推断（步长 0.5 → 1 位） |
data-dir | .zh-num-btn | 1 或 -1 | 按钮的方向：1 增加，-1 减少 |
事件
| 事件 | 触发于 | detail | 说明 |
|---|---|---|---|
zh:number | .zh-num | { value } | 值被步进、回车或失焦后规范化时触发（冒泡），value 是数字 |
样式类
zh-num zh-num-btn zh-num-split zh-num-stack
无障碍
- input 需要 role="spinbutton"，库会维护 aria-valuenow / aria-valuemin / aria-valuemax
- ↑ ↓ 加减一个步长，按住 Shift 或用 PageUp / PageDown 加减 10 个步长，Enter 立即规范化
- 到达边界时对应按钮自动禁用；输入超出范围的值，失焦后会被拉回范围内
- 加减按钮设为 tabindex="-1"，键盘用户直接用方向键
常见问题
数字步进器是什么？
带加减按钮的数字输入，支持范围、步长、小数位数，键盘可操作，按住按钮连续加减。
怎么使用数字步进器？
先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写。
数字步进器有哪些事件？
zh:number（值被步进、回车或失焦后规范化时触发（冒泡），value 是数字）。
数字步进器支持键盘和读屏吗？
input 需要 role="spinbutton"，库会维护 aria-valuenow / aria-valuemin / aria-valuemax；↑ ↓ 加减一个步长，按住 Shift 或用 PageUp / PageDown 加减 10 个步长，Enter 立即规范化；到达边界时对应按钮自动禁用；输入超出范围的值，失焦后会被拉回范围内。
数字步进器需要依赖框架吗？
不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。