移动端键盘遮挡问题

输入框focus后,键盘弹起会遮挡住输入框,解决方法有如下几种:

1.找到元素的顶部位置,页面滚动到元素顶部位置(有时页面高度不足,
可能要添加padding-bottom,以保证页面滚动到指定元素后,用户
能手动滑动到其他位置,可以使用click事件或focus和blur事件,
来控制和解除行为)

zepto

this.$el.bind('click', function(evt) {
    var offset = that.$el.offset();
    var scrollValue = offset.top;
    window.scrollTo(0, scrollValue);
});

javascript

var el = document.getElementById('xx')
el.addEventListener('click',function(evt){
    var top = el.getBoundingClientRect().top;
    window.scrollTo(0,top);
    //或者设置scrollTop
    //window.scrollTop = top;
    //document.body.scrollTop = top;
},false);

2.可以使用scrollIntoView或scrollIntoViewIfNeeded(新版ios中已经失效)

在input的focus或click时候,使用scrollIntoView将页面滚动至元素位置,或者 document.activeElement.scrollIntoViewIfNeeded();

3.分页显示input

将多个输入框分页显示在多屏,每屏只在上半屏显示输入框。

4.弹框输入

将被遮挡的input做成div,点击时候,弹出对话框进入输入。

参考:https://my.oschina.net/cjlice/blog/625526

原文地址:https://www.cnblogs.com/mengff/p/6913493.html