問題描述:
vue混合app開發(fā)中點擊input輸入框時家凯,無法聚焦彈出鍵盤,有時需要多次點擊才能彈出鍵盤送粱,觸發(fā)不靈敏(復現(xiàn)問題以iPhone手機為主掂之,其中iPhone6,7最為明顯)动雹。
問題查尋:
一開始以為是輸入框的樣式或輸入框周圍的樣式影響跟压,后面發(fā)現(xiàn)無關。之后懷疑是沒有觸發(fā)focus事件,又想到全局有引入fastclick丐怯,查了一下得知是fastclick底層問題
FastClick是一個簡單易用的庫翔横,用于消除物理點擊與click移動瀏覽器上的事件觸發(fā)之間的300ms延遲。目的是使您的應用程序感覺更輕松效览,響應更快荡短,同時避免對當前邏輯的任何干擾。
根據(jù)Google的說法是:從您點擊按鈕觸發(fā)點擊事件開始瘦锹,移動瀏覽器將等待大約300毫秒闪盔。原因是瀏覽器正在等待查看您是否實際上正在執(zhí)行雙擊。
解決步驟:
將原本的fastclick依賴用fastclick-hvue(類似的npm還有fastclick-pro听绳,fastclick-vue)依賴替換掉异赫。導入的換成fastclick-hvue的。
如果js直接引用的可以直接修改js代碼塔拳。
FastClick.prototype.focus = function(targetElement) {
var length;
//兼容處理:在iOS7中,有一些元素(如date名惩、datetime孕荠、month等)在setSelectionRange會出現(xiàn)TypeError
//這是因為這些元素并沒有selectionStart和selectionEnd的整型數(shù)字屬性攻谁,所以一旦引用就會報錯,因此排除這些屬性才使用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();
}
};