安卓手机输入框被软键盘遮住的问题

Question

安卓手机输入框被软键盘遮住的问题，如何在点击输入框的时候类似与IOS那种，输入框直接在软件盘的上面，而不会被遮住，js或者css有什么实现的方式

Answer 1

在代码中加入如下代码:

if(/Android [4-6]/.test(navigator.appVersion)) {
   window.addEventListener("resize", function() {
      if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {
         window.setTimeout(function() {
            document.activeElement.scrollIntoViewIfNeeded();
         },0);
      }
   })
}

代码参考来源:stackoverflow-Android does not correctly scroll on input focus if not body element

Answer 2

我这边也遇到过很多这种键盘遮住输入框的问题，监听resize并且触发scroll是可以解决一部分问题，但是后来发现很多是和输入法，浏览器，webView有关，比如有的输入法弹出的时候不会自动滚动，但是输入第一个字符的时候就会滚动到对应的位置，有的浏览器在键盘弹出的时候不会触发resize所以这种方法直接失效了，挺闹心的。

现在我更多会在对需求的时候让交互和设计尽量避免这种输入框在下方的设计，当然一些不可避免的情况没办法了