H5 IOS input输入框唤起键盘导致页面元素位置错乱问题
方法1:vue项目// 输入框获得焦点时触发focus() {this.timer.T = setInterval(() => {// 完美解决输入框被软键盘遮挡this.$refs.footer.scrollIntoView(false)}, 200)},blur() {// ...
·
方法1:vue项目
// 输入框获得焦点时触发
focus() {
this.timer.T = setInterval(() => {
// 完美解决输入框被软键盘遮挡
this.$refs.footer.scrollIntoView(false)
}, 200)
},
blur() {
// 输入框失去焦点时清除定时器
clearInterval(this.timer.T)
}
H5微信页面开发 IOS系统 input输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置,导致弹框里的按钮响应区域错位
解决方案:给输入框(或select选择框)添加失去焦点的事件,当输入框失去焦点,页面自动滚动到顶部,并且需要加定时器,否则偶尔会失效
//blur失去焦点事件
$("input,select,textarea").blur(function(){
setTimeout(function() {
var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
window.scrollTo(0, Math.max(scrollHeight - 1, 0));
}, 100);
})
方法:3 jq项目
/**
* 处理ios输入框的问题
*/
function IOSInput() {
if (os.ios) {
var itimer;
document.body.addEventListener('focusin', function () {
setTimeout(function () {
clearTimeout(itimer);
}, 200);
})
document.body.addEventListener('focusout', function () {
itimer = setTimeout(function () {
$("body").scrollTop(0)
}, 300);
})
}
}
更多推荐
已为社区贡献11条内容
所有评论(0)