解决Vue 移动端在iOS中点击多次输入框才能聚焦的问题

解决Vue 移动端在iOS中点击输入框无法聚焦问题

在移动端开发过程中,都是通过控制台去改变屏幕大小调试页面,基本上不会去考虑唤起键盘的问题,在ios端唤起键盘会有一定时间的延迟,点击输入框不能聚焦,或者点击多次才能聚焦的问题,解决方法如下

引入 npm fastclick 插件

打开cmd cd到项目里.

npm install fastclick -S

在main.js中全局引入

// 引入 fastclick 并重写其 focus 方法
import FastClick from 'fastclick'

// 修复点击延迟
  if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', () => {
      FastClick.attach(document.body)
    }, false)
  }
  FastClick.prototype.focus = function(targetElement) {
    targetElement.focus();
 };
const ver=navigator.userAgent.match(/cpu iphone os (.*?) like mac os/);

if(!ver){//非IOS系统

    // 引入fastclick 做相关处理
    FastClick.attach(document.body);
}
else {
    if(parseInt(ver[1])< 11){
        // 引入fastclick 做相关处理
        FastClick.attach(document.body);
    }
}

问题就完美解决了 扩展

Load 和 DOMContentLoaded 区别

Load 事件触发代表页面中的 DOM,CSS,JS,图片已经全部加载完毕。

DOMContentLoaded 事件触发代表初始的 HTML 被完全加载和解析,不需要等待 CSS,JS,图片加载。


版权声明:本文为weixin_44343557原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。