关于使用fastClick之后再IOS端造成输入框点击困难的解决
2020-03-16 本文已影响0人
明天_874d
首先使用场景,由于ios的特殊性,H5应用移动端点击会造成300MS的延迟,为了消除该延迟,我们就会使用到fastClick插件
引入
import fastClick from "fastclick";
fastClick.attach(document.body);
引入之后我们还需要在main.js中对input和其他输入框做特殊处理 来解决点击困难的问题
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();
}
};
最后就是 我们项目中有一些插件会和fastclick产生冲突,这个时候我们只需要在不希望被fastclick影响到的dom节点上加上
class="needsclick"
比如我项目中就使用到了点击复制,但是会和fastclick产生冲突
这样设置就可以比较好的解决掉了