前提
使用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():解决当输入框失去焦点时页面不回弹的问题。可参考这里