解决ios 微信vue点击input标签两次才响应的问题

 背景:我们公司H5View项目使用的是VantUI,今天有个需求是做个带有搜索框的页面,按照之前的方式,引入van-search标签,开心的我以为已经搞定了。但是测试在测的过程中,发现在安卓设备上使用正常,ios设备上,input标签很难点击,焦点很难定位到输入框。

解决ios 微信vue点击input标签两次才响应的问题_第1张图片

  经过在网上的搜寻,主要的解决方案有以下几种:

  1.input的z-index设置成1000,提高其层级

  2.检查样式中的设置是否有

    {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        box-sizing: border-box;
    }

  在设置之后,均无效果,ios中的input还是很难获取焦点。

  后续,我把重心放在了input标签上,使用标签也还是会有这个问题(项目中使用的是van-search),所以我觉得这个应该和控件没啥关系。

  后来我发现,使用Safari浏览器,input标签可以正常获取焦点,所以,我分析可能是微信浏览器的内部点击延迟?

  就在此时,网上的一篇文章吸引了我的注意

  IOS微信浏览器点击延迟

解决ios 微信vue点击input标签两次才响应的问题_第2张图片 

  文章中提到了使用fastclick插件解决ios点击延迟的问题。

  但是我是用之后还是没啥用,后续,该框架的issues中的一个回答帮我解决了问题,

  传送门faskclick解决方案:

解决ios 微信vue点击input标签两次才响应的问题_第3张图片

  在项目中,我全局使用fastClick,在beforeMount方法中,解决了点击延时的问题。希望可以帮助到大家!






 

你可能感兴趣的:(vantUI,vue移动端,input点击多次响应)