Android 手机下输入框获取焦点时, 输入法挡住输入框的 bug

Posted xulessreigns

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Android 手机下输入框获取焦点时, 输入法挡住输入框的 bug相关的知识,希望对你有一定的参考价值。

DOM的滚动

DOM规范中并没有规定各浏览器需要实现怎样的滚动页面区域,各浏览器实现了相应的方法,可以使用不同的方式控制页面区域的滚动。这些方法作为htmlElement类型的扩展存在,所以它能在所有元素上使用。

1、scrollIntoView(alignWithTop)  滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素。如果alignWithTop为true,或者省略它,窗口会尽可能滚动到自身顶部与元素顶部平齐。-------目前各浏览器均支持

2、scrollIntoViewIfNeeded(alignCenter) 只在当前元素在视窗的可见范围内不可见的情况下,才滚动浏览器窗口或容器元素,最终让当前元素可见。如果当前元素在视窗中可见,这个方法不做任何处理。如果将可选参数alignCenter设置为true,则表示尽量将元素显示在视窗中部(垂直方向)------Safari、Chrome实现了这个方法

3、scrollByLines(lineCount) 将元素的内容滚动指定的行数的高度,lineCount的值可以为正值或是负值。---Safari、Chrome实现了这个方法

4、scrollByPages(pageCount) 将元素的内容滚动指定的页面的高度,具体高度由元素的高度决定。---Safari、Chrome实现了这个方法

 

scrollIntoView()和scrollIntoVIewIfNeeded()作用的是元素的窗口,而scrollByLines()、scrollByPages()影响元素自身,下面是几个示例:

//将页面主体滚动5行

document.body.scrollByLines(5);

 

//确保当前元素可见

document.getElementById(“test”).scrollIntoView();   //

//true:对象的顶端与当前窗口的顶部对齐

//false:对象的底端与当前窗口的顶部对齐

 

//确保只在当前元素不可见的情况下才使其可见

document.getElementById(“test”).scrollIntoViewIfNeeded();

 

//将页面主体往回滚1页

doument.body.scrollByPages(-1);

由于只有scrollIntoView被各浏览器均支持,所以这个方法最为常用

 

function androidInputBugFix()
  //  Android 手机下输入框获取焦点时, 输入法挡住输入框的 bug
  // 相关 issue: https://github.com/weui/weui/issues/15
  // 解决方法:
  //  参考 http://stackoverflow.com/questions/23757345/android-does-not-correctly-scroll-on-input-focus-if-not-body-element
  // Android 手机下, input 或 textarea 元素聚焦时, 主动滚一把
  if (/Android/gi.test(navigator.userAgent))
    window.addEventListener(‘resize‘, function ()
      if (document.activeElement.tagName == ‘INPUT‘ || document.activeElement.tagName == ‘TEXTAREA‘)
        window.setTimeout(function ()
        document.activeElement.scrollIntoViewIfNeeded();
      , 0);
    )
  

以上是关于Android 手机下输入框获取焦点时, 输入法挡住输入框的 bug的主要内容,如果未能解决你的问题,请参考以下文章

input textarea 获取焦点挡住输入法 解决办法

Android 输入法没有传递键盘DELETE事件

H5如何对android和ios手机软键盘的监听

Android WebView 文本框确认密码第二个获取焦点后设置不能自动放大

Android 输入法窗口焦点获取流程(2) ,输入法窗口和应用窗口绑定

android的webview下,如果设置了全屏,输入框获得焦点时,软键盘会盖住输入框,怎么破?