## 27 · 输入框 Input

### 27.1 用途
在一行内收集单行文本（姓名、手机号、金额、验证码等）；移动端与桌面端的关键差别是热区与字号：输入框整行占满、高度不小于 44px，字号不小于 16px，否则 iOS 聚焦时会自动放大页面；清除动作也必须在框内完成，因为触屏没有悬停的鼠标可以移开。

### 27.2 结构（anatomy）
- `field`：字段容器，包裹输入框与下方错误提示（错误提示在框外，不挤占输入区）
- `prefix`：可选前缀，放单位或符号（如「¥」）
- `control`：原生 `input`，占满剩余宽度，字号 16px
- `clear`：可选清除按钮，有值且 `clearable=true` 时出现在右侧
- `suffix`：可选后缀，由默认插槽给出的自定义内容（单位、显示密码等）
- `errorText`：字段下方的错误提示文字

### 27.3 变体维度
- `size`：`default`（高度 44px）/ `large`（高度 52px）
- `clearable`：`false`（无清除按钮）/ `true`（有值时右侧出现清除按钮）

### 27.4 状态
- default：常态
- focus：聚焦，边框变品牌色并带 2px 聚焦外发光
- error：错误，边框变错误色且 `aria-invalid="true"`
- disabled：置灰且不可聚焦

### 27.5 交互与触控
- 输入框高度不小于 44px；整行可点（把 `kole-m-input` 放在 `label` 里，点行即聚焦）
- 清除按钮视觉是 16px 图标，热区外扩到 44px 最小触控边长
- 聚焦反馈是边框色 + 2px 外发光，150ms 过渡；不改变布局（不撑开高度）
- 有值时清除按钮才出现；清除后焦点留在输入框
- 键盘「完成」键触发 confirm 事件，值随 input 事件实时回传

### 27.6 无障碍
- 输入框用原生 `input`，名称由 `aria-label` 给出（占位文字不算标签）
- 错误态用 `aria-invalid="true"`，错误文案用 `aria-describedby` 关联
- 清除按钮是原生 `button` 且带 `aria-label="清除"`
- 禁用态用原生 `disabled`，读屏会跳过

### 27.7 doNotInvent
- 输入内容的正则与业务校验（合法性判断在宿主）
- `inputmode` 之外的自定义软键盘行为（键盘类型由宿主按场景指定）
- 自动填充与验证码自动读取的策略

### 27.8 unknowns
- 密码是否需要内置「显示/隐藏」开关
- 数字输入的千分位格式化时机
- 前缀里是否允许放图片/图标

---