IOS input auto focus 解决方案探究

IOS input auto focus 解决方案探究

开发过hybird的人都知道，在IOS手机下面处于安全策略考虑，不允许JS自动获取input输入框的焦点并调出虚拟键盘，可是从产品角度来看，往往这样的场景有很多，所以也催生出各种各样的hack手段，下面介绍一种自认为是挺完美的方案供大家参考：

业务场景描述：

• A页面点击搜索按钮，跳到B页面，B页面的搜索框自动获取焦点并且弹出虚拟键盘。

方案设计：

基于vue（其他框架类似）设计如下：

1. A、B页面都是不同的路由页面；
2. 在A、B页面公共部分添加一个公共input隐藏输入框并设置唯一id；
3. 将A页面的搜索按钮包一层label节点，并设置for属性指向公共input的id，并设置click事件跳转到B页面；
4. 在B页面的beforeMount中添加监听公共input的input事件，并在监听的回调函数里面去赋值给B页面真正用于显示的input框；
5. 这样就结束了，当我们点击A页面的搜索按钮会触发label for特性显示虚拟弹窗，并跳转到B页面，然后直接按虚拟按键即可完成公共隐藏输入框和真正输入框之间的值的同步赋值；

优点：

1. 以最少的代码完成hack
2. 以最少的改动完成hack

缺点：

1. 唯一的缺点是不能让B页面的输入框一开始的时候有一个光标，这个建议可以写一个通用的input组件，通过CSS hack方式模拟光标显示

结论：

OK，到这里就结束了方案设计了，希望这个思路可以给大家一个参考。