微信公众号浏览器 输入框软键盘弹起收起 高度恢复不了解决
经过描述
- 在微信公众号浏览器 H5开发中,输入框弹起软键盘,在收起,发现页面顶上去,没有恢复滚下拉
- 经过查找资料后发现,微信浏览器在部分版本缺失存在这样bug
解决思路
- 监听键盘收起、抬起事件。
- 在收起事件中,手动设置最外层盒子滚动条滚到顶部
编写一个插件专门负责
var judgeDeviceType = function () {
var ua = window.navigator.userAgent.toLocaleLowerCase();
var isIOS = /iphone|ipad|ipod/.test(ua);
var isAndroid = /android/.test(ua);
return {
isIOS: isIOS,
isAndroid: isAndroid
}
}()
function wechatVersion674Height(scroll) {
setTimeout(() => {
$(scroll).animate({ scrollTop: 0 }, 500);
}, 100)
}
export default function listenKeybord({ inputClass, scroll }) {
if (judgeDeviceType.isIOS) {
const $input = document.querySelector(inputClass)
$input.addEventListener('focus', function () {
console.log('IOS 键盘弹起啦!');
}, false)
$input.addEventListener('blur', () => {
console.log('IOS 键盘收起啦!');
})
}
if (judgeDeviceType.isAndroid) {
var originHeight = document.documentElement.clientHeight || document.body.clientHeight;
window.addEventListener('resize', function () {
var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
if (originHeight < resizeHeight) {
console.log('Android 键盘收起啦!');
wechatVersion674Height(scroll)
} else {
console.log('Android 键盘弹起啦!');
}
originHeight = resizeHeight;
}, false)
}
}
使用方式
import listenKeybord from './h5_input.js'
listenKeybord({
inputClass: '.van-field__control',
scroll: '#mod_pay_page'
})
最后
- 调用函数后,自动开始监听,任何需要监听input。就调用函数。设置class名称定位
- 多个则for循环执行多个函数