固定input框(或者div模拟的input框）在页面底部

前提

使用position:fixed;直接固定input框在页面底部，ios可能会出现位置错乱，而且在输入框失去焦点后页面无法回弹
完整代码如下：

<style>
   body {
        font-size: .26rem;
        -webkit-user-select:none;
    }

    .input {
        width: 200px;
        height: 24px;
        line-height: 24px;
        font-size: 14px;
        padding: 5px 8px;
        border: 1px solid #ddd;
        -webkit-user-select: text;
    }

    .input:empty::before {
        content: attr(placeholder);
        color: red;
    }

    #footer {
        position: fixed;
        bottom: 0;
        width: 100%;
    }
</style>

html代码:
<footer id="footer">
   <div>
     <!--  两者选其一即可 -->
       <!--  使用div模拟input框 -->
       <div class="input" contenteditable placeholder="请输入文字" onblur="temporaryRepair()"></div>
        <!--  使用input框 -->
       <input class="input" type="text" placeholder="请输入" onblur="temporaryRepair()">
    </div>
</footer>

<script>
    function temporaryRepair() {
        var currentPosition, timer;
        var speed = 1; //页面滚动距离
        timer = setInterval(function() {
            currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
            currentPosition -= speed;
            window.scrollTo(0, currentPosition); //页面向上滚动
            currentPosition += speed; //speed变量
            window.scrollTo(0, currentPosition); //页面向下滚动
            clearInterval(timer);
        }, 1);
    }
</script>

代码介绍

• -webkit-user-select：设置或检索是否允许用户选中文本。只要在当前模拟input的div上设置-webkit-user-select: text就可以输入了。
• contenteditable：让div变成可以编辑的
• 函数temporaryRepair()：解决当输入框失去焦点时页面不回弹的问题。可参考这里