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

时间:2025-02-07 12:42:41

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

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

<input type="text"  autocomplete="off"/>
软键盘出现前页面高度
var winHeight = ;
     = function(){
    软键盘出现时页面的高度
        var changeHeight = ;
        if(winHeight-changeHeight>40){
            =winHeight+"px";
        }else{
            ='100%';
        }
 	 }