一、在vue項目中安裝fastclick插件vue
npm install --save fastclick
二、在main.js中引入並綁定到bodyios
import FastClick from 'fastclick' FastClick.attach(document.body);
三、在項目中安裝fastclick成功後測試會遇到如下問題:npm
FastClick.prototype.focus = function (targetElement) { var length; var deviceIsWindowsPhone = navigator.userAgent.indexOf("Windows Phone") >= 0; var deviceIsIOS = /iP(ad|hone|od)/.test(navigator.userAgent) && !deviceIsWindowsPhone; //兼容處理:在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(); } }
var u = navigator.userAgent; var flag; var timer; var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); if (isIOS) { document.body.addEventListener('focusin', () => { //軟鍵盤彈起事件 flag = true; clearTimeout(timer); }) document.body.addEventListener('focusout', () => { //軟鍵盤關閉事件 flag = false; if (!flag) { timer = setTimeout( ()=> { window.scrollTo({ top: 0, left: 0, behavior: "smooth" })//重點 =======當鍵盤收起的時候讓頁面回到原始位置(這裏的top能夠根據大家我的的需求改變,並不必定要回到頁面頂部) }, 200); } else { return false; } }) } else { return false; }