移动端输入框调取iphone手机ios端键盘fixed定位失效如何解决

墨蓝 2023-06-25 08:29 6阅读 0赞

**一、需求问题**

在开发移动端项目的时候，`iphone`手机的软键盘在弹出以后，会与 `position:fixed` 冲突发生问题。当`ios`系统的手机点击输入框的时候，软键盘就会弹出，底部的输入框就会被顶到上面来。当软键盘消失后，滚动区域没有正确的回正，会导致一些内容点击事件无效。`fixed`定位好的元素，会跟随页面一起滚动起来，`fixed`定位属性也就是会失效了。

**二、需求分析**

在`ios`软键盘被唤起后，页面的`fixed`元素失效，也就是无法浮动，所以当页面超过一屏并且滚动的时候，失效的`fixed`元素也会跟随滚动。这个也是`ios`上经常出现的`bug`。

1.  第一种方法，我们可以使用`isScroll.js`，可以使用这个js文件去解决`fixed`定位滚动问题。
2.  第二种方法，我们可以假设页面不会过长的出现滚动，那么`fixed`定位元素失效后，也是无法跟随页面进行滚动的，也就不会出现这样的问题了。按照这个思路，如果让`fixed`元素的父级不出现滚动。将之前`body`中滚动的区域移动到另一个区域中，假设是`main`区域，设置`main`区域为`position: absolute;`，固定定位，进行内部的滚动，同时设置`overflow-y: scroll;` 和 `-webkit-overflow-scrolling: touch;` 让滑动更加的顺畅，以及`bottom: 0`可以让元素的高度不由内容所去决定。最后，有些老的`ios`系统不支持`fixed`定位，将使用`fixed`定位的区域尽量替换为`absolute`定位。
3.  第三种方法，监测屏幕变化。当点击输入框的时候弹出然键盘，会触发屏幕变化，一旦屏幕变小时将原来的`fixed`样式设置成其他的标准的流式布局。屏幕回到原来的大小时就恢复原来的`fixed`样式。

**三、需求实现**

**1. main区域代码实现：**

main { 
        /* main绝对定位，进行内部滚动 */
        position: absolute;
        top: 50px;
        bottom: 0;
        /* 使之可以滚动 */
        overflow-y: scroll;
        /* 增加该属性，可以增加弹性，是滑动更加顺畅 */
        -webkit-overflow-scrolling: touch;   
    }

**2. 监测屏幕变化代码实现：**

var windowInnerHeight = window.innerHeight
         window.addEventListener("resize",()=>{ 
          if(!document.querySelector('.bottomBtn')){ 
            return
          }
          if(window.innerHeight < windowInnerHeight){ 
             document.querySelector('.bottomBtn').classList.add('staticPos') 
          }else{ 
           document.querySelector('.bottomBtn').classList.remove('staticPos')
          }
    })