修复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就是个坑，一不当心就掉坑都不知道了。前端小伙伴，保重共勉！

如代码有错误的，或者遇到问题，请指教！互相学习！