苹果微信input输入框被键盘遮挡

最近一个项目，input输入框需要在页面的最下面（position：fixed），这样，当键盘获取焦点的时候，

苹果自带键盘不会挡住输入框，但是搜狗输入法的键盘就会挡住。可以用以下方法解决：

document.activeElement.scrollIntoViewIfNeeded();

　当input标签获取焦点时，调用以上方法，就可调整当前页面，让页面中元素不被键盘挡住。

这个方法是干什么的呢？MDN是这样解释的：

The Element.scrollIntoViewIfNeeded() method scrolls the current element into the visible area of the browser window if it's not already within the visible area of the browser window. If the element is already within the visible area of the browser window, then no scrolling takes place. 原文

翻译过来大致意思是：

 当当前元素没有在浏览器可视区域内，Element.scrollIntoViewIfNeeded()方法会滚动当前元素，使其进入浏览器的可视区域，如果当前元素已经位于当前浏览器可视区域内，该事件不会执行。

----------------------------------------------2017-01-07更新-------------------------------

1月6号得知消息：微信iOS客户端将于2017年3月1日前逐步升级为WKWebview内核

然后在手机上实际测试了一下，现有项目兼容性如何，结果发现用上文方法解决的input被遮挡失效了，后来我又试了试Element.scrollIntoView方法，结果好用，兼容UIWebview。

----------------------------------------------2017-05-26更新-------------------------------

最新版的ios中以上的方式好像失效了，可以用以下方案代替

window.scrollTo(0, 500);

500是我随机写的，可以根据具体情况修改为合适的值

----------------------------------------------2018-05-05更新-------------------------------

之前的bug好像修复了，大家可以接着用之前的解决方案了

 

转载于:https://www.cnblogs.com/cococe/p/10475777.html