微信內置瀏覽器中，點擊下拉框出現頁面亂跳轉現象（iphone）

微信內置瀏覽器中，點擊下拉框出現頁面亂跳轉現象（iphone）

前言:

      這是小菜博客的第三篇文章。一直認為自己可以表達的東西太過簡單，難以上臺面，總是吝嗇地不肯寫。就算是寫，也不知道從何開始。在同事的鼓勵下，終於跨出了第一步。初期階段，寫文章不一定是非要給他人看，當作自己的學習筆記也是一個不錯的選擇。另外，在這幾次的寫作中發現，寫技術博客本身也是需要一定的表達能力。好了，廢話不多說，開始講講在項目中碰到的實際問題吧。

情景再現:

      正當開心地收拾東西準備下班的時候，測試部的姑娘跑過來提了一個bug: “在iphone5下，點擊輸入框或下拉框時，底部菜單無法固定，出現頁面亂跳轉現象，而安卓機並沒有這個問題。”由於項目比較急，小菜只能乖乖留下解決問題。再次測試之後，小菜逐一排查了可能性原因(正式版和測試版代碼不一致，頁面HTML代碼錯亂，css代碼錯誤)，但都未能解決問題。一個簡單的select，怎麼就出現問題了呢?百思不得其解。（至今也沒有找到問題根源）

      找不出問題根源，只能先看看有沒有解決方案。經過多次調試，捕獲select動作，找到了一個解決方案。原理很簡單：利用div來模擬select。

解決方案:

      思路也是比較清晰的。頁面中有兩個html結構，一是select代碼照常寫（一開始處於隱藏狀態display:none），二是被模擬的div(一開始處於顯示狀態)。當點擊div時： 

1. 出現select下拉框
2. 隱藏底部菜單
3. 將讀取的option值給被模擬的div，其模擬核心代碼可下載VisualSelect.js
4. 賦值之後，恢復開始狀態，顯示底部菜單

以下是代碼：

【html代碼】

<div class=”visualSelect” >商行</div>
<select class=”round” style=”display:none;”>
    <option value=”1”>國股</option>
    <option value=”2”>商行</option>
    <option value=”3”>其他</option>
</select>

【css代碼】

.round { border-radius: 4px;}
.visualSelect {
    width: 100%;
    padding: .45rem .5rem .25rem .75rem;
    margin-bottom: .875rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #bbb;
}

【js代碼】

註：由於該問題只存在於小屏幕iphone，android手機並沒有問題，因此最好判斷機型。這裡對iphone機型作了統一判斷，並未詳細區分。要是有興趣的，可以自行詳細判別。

var agent = navigator.userAgent;
if ( agent.indexOf(“iPhone”) > -1) {  
    $(“select”).VisualSelect();    //調用插件即可
}