ionic 真機無故彈出keybord鍵盤

在開發ionic App的時候,有時會碰到這樣怪異的情形:分明沒有點擊input鍵,但是卻在真機(或模擬器)上彈出了鍵盤,這並不是我們想要的。我們希望input focus事件是受自己控制的。

觸發事件情形分析

這是怎麼回事呢?一直百思不得其解。但是發現了這樣的規律,無故彈出軟鍵盤的情形,一般是這樣的:
這裏寫圖片描述
拇指點擊區域和input框的位置存在重疊。不管input和拇指點擊區域是不是在同一頁面,只要兩者出現重疊,點擊的時候都會觸發input focus事件,彈出軟鍵盤。

解決思路

那麼,只要讓點擊區域和input的位置不重疊不就可以了麼?理想很美好,現實很骨感,設計圖不是說改就能改的-_-#。所以,只好繼續尋找解決方案。

嘗試一(失敗)

在input框上面覆蓋一個透明的div。默認是display:block,當點擊後500ms後,更改樣式爲:display:none。以爲這樣就點擊不到input上面,而觸發focus事件了。結果:focus時而觸發時而不觸發。

嘗試二(成功)

從嘗試一得到啓發,點擊事件必然是由div傳遞給了input,那麼同理,一定是因爲點擊區域和input存在事件傳遞,所以導致了input的點擊事件,從而觸發了focus事件,所以,只要屏蔽事件冒泡和事件捕獲就可以。

ev.preventDefault();
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章