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