移动web页面,input获取焦点弹出系统虚拟键盘时,挡住input,求解决方案?

移动web页面,inpu获取焦点弹出系统虚拟键盘时,挡住input,求解决方案?
关注者
332
被浏览
87,618

42 个回答

输入框获取到焦点的时候,执行下面代码(vue.js中):

亲测在iPhone SE,iPhone6 Plus,iPhone6s Plus,iPhone6,iPhone5c,华为 mate9,魅蓝等手机上没出现问题

--------------------------------------------------------

同时加这两行代码(其他部分代码,参考上面截图),可以兼容360手机和iPhone 6s键盘问题,亲测有效

pannel.scrollIntoView(true);
pannel.scrollIntoViewIfNeeded();

--------------------------------------------------------

或者jquery中试试:


效果:

当虚拟键盘弹出的时候,window的resize事件会被触发(至少我的Android手机是这样)

问题里的input是使用position:fixed吗,如果是position: fixed,在resize触发时应该会自动调整位置吧。

// 以下代码用于直接将文档流中的元素移动到视区内,Android5.0+有效(只测了5.0和5.1,其他未知),IOS没测过。
element.scrollIntoView()

====================================================================
监听input元素的focus事件,以及window的resize事件。因为focus事件将在resize事件前触发。
在focus事件中,将获得焦点的input元素保存变量中。
在resize事件中,获得浏览器可视区域的top和bottom。
获得浏览器可视区域的位置:
var viewTop = $(window).scrollTop(),            // 可视区域顶部
    viewBottom = viewTop + window.innerHeight;  // 可视区域底部
// 不使用jQuery
var viewTop = document.body.scrollTop,
    viewBottom = viewTop + window.innerHeight;
获得元素的在文档中的位置:
var elementTop = $element.offset().top, // $element是保存的input
    elementBottom = elementTop + $element.height();
// 不使用jQuery
/* 获得元素的位置信息 */
var getElementPosition = function(elem) {
    var defaultRect = {top: 0, left: 0};
    var rect = (elem.getBoundingClientRect && elem.getBoundingClientRect()) || defaultRect;
    var ret = {
        top: rect.top + document.body.scrollTop,
        left: rect.left + document.body.scrollLeft
    }
    return ret;
}
var elementTop = getElementPosition(element).top, // 元素顶部位置
    elementBottom = elementTop + element.clientHeight; // 元素底部位置


// 小结一下

document.body.scrollTop获得当前body滚动的位置。
getBoundingClientRect()获得element相对于viewport的位置
从上面的代码中看到其实:
判断元素是否在可视区域内,直接使用element.getBoundingClientRect()就好(* ̄∇ ̄*)

调整视窗位置
$(window).scrollTop(value); // 调整value
// 不使用jQuery
window.scrollTo(0, value); // 调整value

调整到想要的效果。

我的Android手机上,当input获得焦点的时候,浏览器好像会自动移动input到可视区域内。
_(:з」∠)_