# 数字步进器

带加减按钮的数字输入，支持范围、步长、小数位数，键盘可操作，按住按钮连续加减。

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

## 用法

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

## 样式类

`zh-num`、`zh-num-btn`、`zh-num-split`、`zh-num-stack`

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `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 是数字 |

## 无障碍

- 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。