修复ios不支持fixed属性-CSDN博客

场景说明：产品需求在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>
复制代码