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

概述DOM的滚动 DOM规范中并没有规定各浏览器需要实现怎样的滚动页面区域，各浏览器实现了相应的方法，可以使用不同的方式控制页面区域的滚动。这些方法作为HTMLElement类型的扩展存在，所以它能在所有元素上使用。 1、scrollIntoView(alignWithTop)  滚动浏览器窗口或容器元素，以便在当前视窗的可见范围看见当前元素。如果alignWithTop为true，或者省略它，窗口会

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全部内容，希望文章能够帮你解决Android 手机下输入框获取焦点时, 输入法挡住输入框的 bug所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。