修復ios不支持fixed屬性

場景說明：產品需求在wap頁面，須要在頁面底部固定一塊區域執行輸入操做。在Android手機中，對position：fixed是完美支持並實現預計效果的，但ios系統手機測試時出現輸入框光標不居中和底部區域有時候會被彈出的鍵盤遮擋一部分。

度娘搜出方案：

• 使用position：absolute模擬；
• 判斷當前得到焦點元素是input則隱藏div改成position：absolute；
• 插件iscroll.js；

實踐度娘提供的方案，三個字 不靠譜！！

最後採用當下比較流行的單頁面思想，頁面加載時，給頁面最外層div設置屏幕高度，再設置overflow：scroll和position:relative屬性，即頁面超過就滾動顯示。而後給需固定底部區域設置position：absolute；bottom:0px;left:0px;從而實現了position：fixed屬性的效果。

<div style="position:relative;" id="pageContal">
    <div style="postion:absolute;bottom:0px;lefe:0px;">
        <input type="text" style="border:1px solid #e6e6e6;border-radius:6px" placeholder="請輸入你的手機號碼"/>
    </div>
</div>
複製代碼

進入階段，產品經理拿着2臺不一樣系統手機出現我面前，給我看了效果，發現因爲系統不一樣，連同一個輸入法，也有不一樣高度和顯示樣式。在ios系統中，用戶下載的輸入法仍是出現遮擋底部輸入框的狀況出現。此時我無言以對，無法懟產品經理了。

因此最後本身寫了一個模擬鍵盤的插件。。。。

模擬鍵盤插件實現思路：採用表格佈局，高度和寬度自適應，移動端用rem單位省事很多。而後監聽每一個數字鍵盤的點擊事件，（此處有個大坑，ios的若是不是a標籤，是無click事件，點擊無效，其餘元素添加click事件，必須加一個屬性：cursor：pointer，元素點擊纔有效果）；定義一個數組來存放用戶輸入的值，點擊就數組追加元素，刪除元素就是數組刪除元素，so easy！

<table id="table-keyboard">
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td class="bg-ccc"></td>
            <td class="num-td">0</td>
            <td class="delte_but bg-ccc"><img src="img/keyboard-del.png" alt=""/></td>
        </tr>
    </tbody>
</table>
複製代碼

效果

剛作完這個項目，趁週末休息時間，總結一下此次遇到印象比較深入的問題，感受ios就是個坑，一不當心就掉坑都不知道了。前端小夥伴，保重共勉！

如代碼有錯誤的，或者遇到問題，請指教！互相學習！