美文网首页
vue项目中使用fastclick时ios input点击不灵敏

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

作者: 芒果大饼 | 来源:发表于2019-05-15 11:30 被阅读0次

    低版本的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

    <input v-reset-page type="text" value=""/>

    相关文章

      网友评论

          本文标题:vue项目中使用fastclick时ios input点击不灵敏

          本文链接:https://www.haomeiwen.com/subject/ydtpaqtx.html