场景:
在写微信项目的时候, 经常会遇到一些表单项。对于移动端项目,input(输入框)聚焦时,都会唤起设备键盘,内容输入完成,点击 “完成” 按钮,设备键盘消失,页面正常显示。
问题:
但在IOS 12.0版本----微信浏览器中常常会遇到:设备键盘消失后,当前页面底部大片空白问题,不能自动恢复整屏的页面显示。(如下图)
解决办法:
- 让input失去焦点时,页面回到顶部即可,代码如下
template代码:
<input
type="text"
v-model="text"
@blur="onBlur"
/>
js代码:
methods: {
onBlur() {
window.scrollTo(0, 0) // input失去焦点,让页面回顶部
}
}
完美解决~?