我们在写h5页面嵌套在原生app里面的时候,有时候会遇到进入某个页面就让input输入框自动聚焦的需求(比如搜索页面)。但是通常在iso手机上会出现自动聚焦没反应的情况。
然后我在网上试验过各种解决方案,基本都是无效的。最终和ios开发人员联调得出结果,在ios12系统以上版本,苹果端考虑到用户的安全性和体验方面的因素,是不支持input框自动聚焦属性的!
然后,最终的解决方案是:
1. 在input标签里面添加 autofocus = true属性
input type="text" v-model="keyWord" ref="input" :autofocus=autofocus />
2. 在vue的生命周期mounted里面处理,通过app开发人员提供的方法,判断是否是ios环境,如果是,则设为自动聚焦
mounted() {
//屏幕滚动隐藏键盘
if (NativeBridge.isNewIos()) {
this.autofocus = true;
}
window.ontouchmove = function() {
$('input').blur();
};
},
3.联系ios开发人员,将webview加上可支持input框自动聚焦配置。
在ios端的UIWebview有个属性setKeyboardDisplayRequiresUserAction,把这个属性设置false,就可以实现自动聚焦:
[webView setKeyboardDisplayRequiresUserAction:NO]
但是WKWebView没有这个属性,所以需要改为如下设置:
let webView = WKWebView()
webView.keyboardDisplayRequiresUserAction = false
4.最后再在ios12版本以上系统打开app的该页面,即可实现自动聚焦,完美解决!