移动端底部fixed定位input输入框被软键盘遮挡解决办法,方法有三种,具体使用可以看应用后问题是否被解决。
方式一:事件+失焦聚焦
// touchstart或focus事件
<input
maxlength="100"
@touchstart.native="handleClick"
ref="input"
type="textarea"
v-model="reason"
placeholder="请输入补充内容"
/>
handleClick(e) {
e.preventDefault();
this.$nextTick(() => {
this.$refs.input.blur();
this.$refs.input.focus();
});
}
方式二:scrollIntoView
scrollIntoView() 方法会滚动元素的父容器,使被调用 scrollIntoView() 的元素对用户可见。
mounted(){
this.scrollIntoView()
},
methods: {
//输入施工费用时,调整页面scroll高度
scrollIntoView() {
window.addEventListener("resize", () => {
document.activeElement.scrollIntoView(true);
});
},
},
unmounted() {
window.removeEventListener("resize");
}
方式三:滚动元素
//解决移动端苹果手机固定底部input框被遮挡问题
//这里加定时器的目的在于防止input框一获取到焦点之后,就执行了这个操作,导致这一操作没有很好的执行
//给input框绑定focus事件
onFocus(){
setTimeout(() => {
document.body.scrollTop = document.body.scrollHeight
},300)
}
参考地址: