博客

问题描述：

vue混合app开发中点击input输入框时，无法聚焦弹出键盘，有时需要多次点击才能弹出键盘，触发不灵敏（复现问题以iPhone手机为主，其中iPhone6，7最为明显）。 

问题查寻： 

一开始以为是输入框的样式或输入框周围的样式影响，后面发现无关。之后怀疑是没有触发focus事件，又想到全局有引入fastclick，查了一下得知是fastclick底层问题

FastClick是一个简单易用的库，用于消除物理点击与click移动浏览器上的事件触发之间的300ms延迟。目的是使您的应用程序感觉更轻松，响应更快，同时避免对当前逻辑的任何干扰。

根据Google的说法是：从您点击按钮触发点击事件开始，移动浏览器将等待大约300毫秒。原因是浏览器正在等待查看您是否实际上正在执行双击。

解决步骤：

将原本的fastclick依赖用fastclick-hvue（类似的npm还有fastclick-pro，fastclick-vue）依赖替换掉。导入的换成fastclick-hvue的。

如果js直接引用的可以直接修改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();
        }
    };