移動端vue項目--蘋果手機input輸入框觸發(fā)不靈敏

問題描述:

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();
        }
    };
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末呼寸,一起剝皮案震驚了整個濱河市猴贰,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌瑟捣,老刑警劉巖栅干,帶你破解...
    沈念sama閱讀 207,248評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件碱鳞,死亡現(xiàn)場離奇詭異,居然都是意外死亡窿给,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,681評論 2 381
  • 文/潘曉璐 我一進店門戒洼,熙熙樓的掌柜王于貴愁眉苦臉地迎上來圈浇,“玉大人,你說我怎么就攤上這事磷蜀“倬妫” “怎么了?”我有些...
    開封第一講書人閱讀 153,443評論 0 344
  • 文/不壞的土叔 我叫張陵庶弃,是天一觀的道長德澈。 經常有香客問我,道長梆造,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,475評論 1 279
  • 正文 為了忘掉前任贴捡,我火速辦了婚禮村砂,結果婚禮上,老公的妹妹穿的比我還像新娘箍镜。我一直安慰自己,他們只是感情好香缺,可當我...
    茶點故事閱讀 64,458評論 5 374
  • 文/花漫 我一把揭開白布图张。 她就那樣靜靜地躺著诈悍,像睡著了一般。 火紅的嫁衣襯著肌膚如雪侥钳。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,185評論 1 284
  • 那天苦酱,我揣著相機與錄音给猾,去河邊找鬼。 笑死扯饶,一個胖子當著我的面吹牛,可吹牛的內容都是我干的尾序。 我是一名探鬼主播饶辙,決...
    沈念sama閱讀 38,451評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼弃揽,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了矿微?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,112評論 0 261
  • 序言:老撾萬榮一對情侶失蹤掖举,失蹤者是張志新(化名)和其女友劉穎娜庇,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體名秀,經...
    沈念sama閱讀 43,609評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡匕得,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,083評論 2 325
  • 正文 我和宋清朗相戀三年汁掠,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片考阱。...
    茶點故事閱讀 38,163評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡乞榨,死狀恐怖,靈堂內的尸體忽然破棺而出政溃,到底是詐尸還是另有隱情,我是刑警寧澤态秧,帶...
    沈念sama閱讀 33,803評論 4 323
  • 正文 年R本政府宣布申鱼,位于F島的核電站,受9級特大地震影響淫半,放射性物質發(fā)生泄漏匣砖。R本人自食惡果不足惜昏滴,卻給世界環(huán)境...
    茶點故事閱讀 39,357評論 3 307
  • 文/蒙蒙 一谣殊、第九天 我趴在偏房一處隱蔽的房頂上張望牺弄。 院中可真熱鬧,春花似錦蛇捌、人聲如沸咱台。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,357評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至祥诽,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間雄坪,已是汗流浹背屯蹦。 一陣腳步聲響...
    開封第一講書人閱讀 31,590評論 1 261
  • 我被黑心中介騙來泰國打工登澜, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留阔挠,地道東北人购撼。 一個月前我還...
    沈念sama閱讀 45,636評論 2 355
  • 正文 我出身青樓迂求,卻偏偏與公主長得像晃跺,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子凌盯,可洞房花燭夜當晚...
    茶點故事閱讀 42,925評論 2 344

推薦閱讀更多精彩內容