h5页面在ios端输入框不能自动聚焦

我们在写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的该页面,即可实现自动聚焦,完美解决!

发布了9 篇原创文章 · 获赞 2 · 访问量 694

猜你喜欢

转载自blog.csdn.net/sinat_39049092/article/details/105577795