移动端弹出软键盘时会将页面顶上去

最新推荐文章于 2025-02-19 17:54:48 发布

原创最新推荐文章于 2025-02-19 17:54:48 发布 · 3.8k 阅读

6 ·

CC 4.0 BY-SA版权

UI框架功能实现同时被 2 个专栏收录

7 篇文章

订阅专栏

基础样式与兼容

2 篇文章

订阅专栏

本文探讨了移动端项目中软键盘弹出导致的页面布局错乱问题，包括样式破坏和自动填充影响，提供了通过调整父元素定位及监听窗口尺寸变化来保持页面可见性的解决方案。

之前做移动端项目时有出现过这样的情况，主要原因是因为当软键盘弹出，因为软键盘与页面处于相同层级，软键盘的出现会破坏原本的样式，造成部分页面不可见问题
还有一个细节问题，之前因为会出现浏览器保存的信息（类似于模糊查找），弹出后如果不选择弹出的选项的话，直接关闭软键盘，弹出的位置不会改变，影响效果
需要在input框阻止自动填充

注：当时我设置最外层父元素为相对定位，不可将之设置为固定定位，否则下面样式不会生效

<input type="text"  autocomplete="off"/>

软键盘出现前页面高度
var winHeight = window.outerHeight;
    window.onresize = function(){
    软键盘出现时页面的高度
        var changeHeight = window.outerHeight;
        if(winHeight-changeHeight>40){
            document.body.style.height=winHeight+"px";
        }else{
            document.body.style.height='100%';
        }
 	 }