移动端页面中有一个input框,点击时弹出软键盘,关闭时页面底部空白出一部分,然后滑动一下又恢复原状了。
解决方案: 绑定一个blur事件,当其触发时,使scrollTo为0
<input type="text" v-model="teamCodeValue" @blur="inputBlur">
//对应的methods中添加js
inputBlur () {
window.scrollTo(0, 0)
},
假如你用的是UI组件,可以在mounted,写监听事件:
mounted(){
document.getElementsByTagName('input')[3].addEventListener('blur', this.inputBlur)
document.getElementsByTagName('input')[4].addEventListener('blur', this.inputBlur)
document.getElementsByTagName('textarea')[0].addEventListener('blur', this.textareaBlur)
}
如果是很多,那么可以直接获取所有
let inputs = document.getElementsByTagName('input')
for (var i = 0; i < inputs.length; i++) {
inputs[i].addEventListener('blur', this.inputBlur)
}