修复苹果iOS 原生键盘遮挡fixed区的input输入框

最新推荐文章于 2025-04-07 16:50:18 发布

转载最新推荐文章于 2025-04-07 16:50:18 发布 · 400 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2393989/blog/3029794

文章标签：

#python

本文介绍了一种在网页中对输入框获得和失去焦点时进行高度调整的方法，以适应软键盘弹出引起的页面布局变化。通过JavaScript实现了对body高度的动态调整，确保了用户体验的流畅性。

2019独角兽企业重金招聘Python工程师标准>>>

// css
.mainBox{
    height:100vh;
    position:relative;
}
.inputBox{
    position:absolute;
    bottom:0;
}
// 输入框获得焦点事件
onFocus() {
    setTimeout(function(){
        // 设置body的高度为可视高度+302
        // 302为原生键盘的高度
        document.getElementsByTagName('body')[0].style.height = (window.innerHeight + 302) + 'px';
        document.body.scrollTop = 302;
    }, 300)
}
// 输入框失去焦点事件
onBlur() {
    // 设置body恢复原来的高度
    document.getElementsByTagName('body')[0].style.height = window.innerHeight + 'px';
}

转载于:https://my.oschina.net/u/2393989/blog/3029794