【业务】搜索页面中iOS input 不能focus产生的问题及妥协处理办法

[Jmingzi]

问题1

京东首页 到 搜索页为2个页面，在iOS中，input输入框获取焦点即input.focus()必须由用户触发，否则无效。

即使使用setTimeout or nextTick也无效。

I think this is a feature of mobile Safari rather than a bug. In our work on FastClick, my colleagues and I found that iOS will only allow focus to be triggered on other elements, from within a function, if the first function in the call stack was triggered by a non-programmatic event. In your case, the call to setTimeout starts a new call stack, and the security mechanism kicks in to prevent you from setting focus on the input.

解决办法

第一步

由将搜索页面作为组件分别引入首页和列表等其他需要用到搜索的页面，在点击的时候去触发focus

于是又来带另外一个问题，作为组件引入的时候，只能通过state来控制显示与隐藏，而input的focus必须是display:block;的元素才行。

由于设置了state后，需要vue本身的watcher去更新视图，此时是个异步的过程，focus就无效了。

第二步

手动操作dom为block后再focus，此时带来的牺牲是搜索页展现的时候没有动画效果了。

流程图如下

动画对比

首页兼容的没有动画 与 列表页不能focus有动画 对比

参考

iOS下setTimeout无法触发focus事件的解决方案
Mobile Safari Autofocus text field