表单里的 7 类输入控件，原生控件凑合不了

最近在整理表单交互，发现用户填不下去，很多时候不是内容难，而是控件没选对。原生输入框也能用，只是填起来每一步都费劲一点。把常见的 7 类记一下。

验证码：6 个独立方格

做法：6 个单字符格子，输一位自动跳下一格，退格时删当前格并回退；支持粘贴，一次粘 6 位自动分配到各格；全部填完自动提交。

为什么：一个输入框里输 6 位数字，用户看不出来自己输了几位、错了哪一位；分格之后进度一目了然。

坑：

• 粘贴逻辑要单独写，paste 事件里截取前 6 位再分配
• 部分手机输入法会触发两次输入事件，要判断格子是否已被填
• 自动提交加防抖，避免输错一位也立刻提交
• 错误后清空全部格子，焦点回到第一格

拖拽上传：虚线框 + 进度 + 前置说明

做法：虚线框同时支持点击选择文件和拖拽放入；每个文件一行，带进度条和删除按钮；限制说明（类型、大小）写在框上。

为什么：限制写在报错里太晚——用户选完一个 50M 的文件才被拒，白等一次上传。

坑：

• 拖拽必须监听 dragover 并阻止默认行为，否则浏览器会直接打开文件
• 进度条要接真实上传进度，别用假动画糊弄
• 删除文件要能中断正在进行的上传请求
• 类型校验同时查扩展名和 MIME，MIME 有时是空的

日期选择：区间和滚动是两种控件

做法：入住离店用日期范围选择器，先点开始再点结束，起止之间整段高亮；出生日期用年、月、日三列滚动选择。

为什么：区间选择突出连续性；生日跨度几十年，日历一页页翻太费劲，三列滚动一次能跨很远。

坑：

• 区间选择要自动纠正顺序，先点结束再点开始也得能用
• 结束日期不能早于开始日期
• 三列滚动的月份天数要跟着年月联动，2 月 29 号这类别放过
• 生日默认值别用今天

滑块：粗选用范围，精确值配输入框

做法：价格筛选用双端范围滑块；年龄、身高这种要精确到个位的，用输入框，或者滑块旁边配输入框做双向同步。

为什么：滑块适合粗选和快速感知区间；精确数值时手指对不准，拖半天差 1 个值。

坑：

• 双端滑块两头的值不能交叉
• 滑块和输入框同步要防循环触发（输入框改→滑块更新→再触发输入框更新）
• 拖到两端时显示"不限"之类的边界提示
• 键盘用户要能用方向键微调

自动补全：实时匹配 + 高亮

做法：城市、学校这类选项多的字段，输入时实时列出匹配项，命中的文字高亮。

为什么：上百个选项的下拉框，滚动找太慢；边输入边筛，两步变一步。

坑：

• 中文输入法组词阶段不要触发搜索（用 compositionstart/compositionend 判断），否则拼音阶段就开始乱匹配
• 请求要防抖，300ms 左右，别每敲一个字打一次接口
• 支持键盘上下选择、回车确认
• 没有匹配时给"无结果"提示，别留一个空白下拉

级联选择：逐级展开

做法：省市区这类层级字段，选完一级，下一级在旁边展开。

为什么：三列同时滚动的选择器，用户经常不知道自己停在哪个层级。

坑：

• 切换上级时清空下级已选值
• 下级选项如果是异步加载，加载中要有状态提示
• 最终值保存完整路径（省、市、区），别只存最后一级
• 部分城市没有区级数据，要容错

标签输入：回车生成

做法：兴趣、技能这类多值字段，输入后按回车生成标签，每个标签带删除按钮。

为什么：多选下拉要反复开面板点选，输入型标签更快，还支持自定义值。

坑：

• 回车、逗号、失焦三个时机要统一处理，用户习惯不同，不然会丢标签
• 重复标签去重
• 输入法候选词的回车不能误触发生成标签（同样要看 compositionend）
• 标签数量上限和单个长度限制提前说明

怎么选

最后

这 7 类里，标签输入这类我在项目里实际做过，其余是对照常见规范和移动端表单实践整理的，没到全部上手写一遍的程度。共同点是：原生控件不用换，也能让用户把字打进去，只是每一步都多费一点劲。