移动端键盘遮挡问题

输入框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