ios移动端软键盘收起后input输入框焦点错位或无法输入解决

梦里梦外; 2024-04-19 11:40 113阅读 0赞

#### 本文为开发中遇到的问题解决方案总结：ios移动端软键盘收起后input输入框焦点错位或无法输入解决 ####

#### 问题描述： ####

页面背后是可滚动的列表，前面是弹出框，里面有需要输入值的input框。当打开键盘后，弹出框跟后面的列表都会被顶上去一段距离，*当再关闭键盘就可能出现：前面的弹出框回到了原来的位置，而后面的列表依然是顶上去的位置。这时后再去点击弹出框的输入框或者按钮的时候发现焦点依然停留在键盘弹出后顶上去的位置，造成了弹出层焦点错位。*  
只有手动滑动后面的列表到原来位置后，弹出层的焦点才会恢复。

#### 解决方案： ####

**1**：

**如果使用的react框架，可直接复制上述代码到componentDidMount（）中**  
参考>[文章内容参考][Link 1] https://blog.csdn.net/qq\_23179075/article/details/86497498

**2**:  
输入框所在的元素用了position:fixed，安卓端一切正常，ios系统在input失焦后键盘缩回去了但是页面不归位。可能原因：键盘事件触发，导致position:fixed失效。

$("input").on("blur",function(){ 
    	window.scroll(0,0);//失焦后强制让页面归位
    });

**3**:  
H5微信页面开发，软键盘弹起后，若原输入框被遮挡，页面整体将会上移，然而当输入框失焦，软键盘收起后，页面未恢复，导致弹框里的按钮响应区域错位。

解决方案：给输入框（或select选择框）添加失去焦点的事件，当输入框失去焦点，页面自动滚动到顶部，并且需要加定时器，否则偶尔会失效

$("input,textarea,select").blur(function(){ 
       setTimeout(function() { 
           var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
           window.scrollTo(0, Math.max(scrollHeight - 1, 0));
           }, 100);
        })

##### PS： #####

**window.scroll()方法已废弃，该方法已经使用了 scrollTo() 方法来替代。建议使用window.scrollTo()**  
*scrollTo(xpos,ypos)，可把内容滚动到指定的坐标。*  
微信中遇到的坑：https://gitee.com/linguanhua/codes/jyeoqxtvmwcir7pzsak9l98

[Link 1]: https://blog.csdn.net/qq_23179075/article/details/86497498