vue项目中使用fastclick时ios input点击不灵敏

低版本的ios不会出现这种问题,可能是由于ios11出现的问题,解决方法如下,在main.js入口文件里加入

FastClick.prototype.focus = function(targetElement) {

    var length;

    //兼容处理:在iOS7中,有一些元素(如date、datetime、month等)在setSelectionRange会出现TypeError

    //这是因为这些元素并没有selectionStart和selectionEnd的整型数字属性,所以一旦引用就会报错,因此排除这些属性才使用setSelectionRange方法

    if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month' && targetElement.type !== 'email') {

        length = targetElement.value.length;

        targetElement.setSelectionRange(length, length);

        /*修复bug ios 11.3不弹出键盘,这里加上聚焦代码,让其强制聚焦弹出键盘*/

        targetElement.focus();

    } else {

        targetElement.focus();

    }

};

另外监听键盘弹起的方法:

Vue.directive('resetPage', {

  inserted: function (el) {

    // 监听键盘收起事件

    document.body.addEventListener('focusout', () => {

      if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {

        //软键盘收起的事件处理

        setTimeout(() => {

          const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0

          window.scrollTo(0, Math.max(scrollHeight - 1, 0))

        }, 100)

      }

    })

  }

})

在input里添加 v-reset-page

你可能感兴趣的:(vue项目中使用fastclick时ios input点击不灵敏)