Vant UI 中 van-stepper 组件在 iOS 低版本的输入框聚焦问题解析

问题现象

在使用 Vant UI 的 van-stepper 组件时，开发者发现在 iOS 低版本设备（如 iPad Mini 4 运行 iOS 15.8.3）上出现了一个特殊问题：当通过数字形式绑定 min 和 max 属性（如 :min="0" 或 :max="10"）时，点击输入框虽然会弹出键盘，但输入框无法获得焦点，导致用户无法直接输入数值。

问题排查

经过深入分析，这个问题表现出以下特点：

1. 仅在 iOS 低版本设备上出现
2. 在开发环境下可能无法复现，但在生产环境打包后会出现
3. 使用字符串形式传参（如 min="0"）时不会出现此问题
4. 文档示例中使用 :min="5" 的数字形式绑定却可以正常工作

根本原因

这个问题实际上与 iOS 低版本浏览器对用户选择(user-select)行为的特殊处理有关。在 iOS Safari 中，特别是较旧版本，浏览器对表单元素的焦点获取有更严格的限制。

当组件被编译打包后，某些 CSS 属性可能会被优化或覆盖，导致输入框的 user-select 属性被设置为 none，从而阻止了正常的焦点获取行为。

解决方案

通过在组件样式中显式设置用户选择属性，可以解决此问题：

:deep(.van-stepper__input) {
  user-select: text;
  -webkit-user-select: text;
}

这个解决方案的作用是：

1. 强制允许用户在输入框中选择文本
2. 确保输入框能够正常获取焦点
3. 使用 :deep() 选择器穿透 Vue 的作用域样式
4. 同时设置标准属性和带前缀的属性以确保兼容性

最佳实践建议

对于类似表单组件的开发和使用，建议：

1. 始终测试 iOS 低版本设备的兼容性
2. 对于需要用户输入的组件，显式设置 user-select: text
3. 在生产环境部署前进行充分的真机测试
4. 考虑添加适当的 CSS 重置规则来避免类似问题

总结

这个案例展示了移动端开发中常见的兼容性问题，特别是针对 iOS 旧版本设备的特殊处理。通过理解浏览器行为背后的原理，我们可以更有针对性地解决问题，而不仅仅是依赖试错法。对于 UI 组件库的使用者来说，了解这些底层机制也有助于更快地定位和解决实际开发中遇到的问题。