导致原因:
是微信webview打开我们h5页面的时候,就固定了页面的高度,如果这个input在页面的底部,当唤起软键盘的时候,由于高度问题,整个webview会被键盘顶上去,,而取消的时候没有恢复原状。
解决办法
第一种:失去焦点后自动置顶
inputLoseFocus() {
setTimeout(() => {
window.scrollTo(0, 0);
}, 100);
},
第二种:使scrollTo回到底部
inputLoseFocus() {
setTimeout(() => {
const scrollHeight = document.documentElement.scrollHeight
|| document.body.scrollHeight;
window.scrollTo({
top: scrollHeight,
behavior: 'smooth',
});
}, 100);
}
第三种:计算当前input距离顶部的高度,使页面滚动到当前位置
inputLoseFocus() {
console.log(`window.pageYOffset: ${window.pageYOffset}`);
window.scrollTo({
top: window.pageYOffset,
behavior: 'smooth',
});
}