:input获得焦点时被弹出键盘挡住解决办法

这个是移动端非常常见的bug了，这里说下综合的解决办法，因为有时候你的办法就是会失效。。

上代码

/*input框调起输入法盖住输入问题*/
$('input[type="text"]').on('click', function () {
　　var target = this;
　　var t = navigator.userAgent;
　　if (t.indexOf("Android") > -1 || t.indexOf("Adr") > -1) {
　　　　var e = $(this).offset().top - 30;
　　　　$(window).scrollTop(e);
　　};
　　setTimeout(function(){
　　　　target.scrollIntoViewIfNeeded();
　　},400);
});

注意点1：使用scrollTop时。要注意首页页面要设置高度 height：100% ，其次页面的overflow：hidden，display：none;也会影响

注意点2：scrollIntoView(alignWithTop): 滚动浏览器窗口或容器元素，以便在当前视窗的可见范围看见当前元素。

alignWithTop 若为 true，或者什么都不传，那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐；

alignWithTop 若为 false，调用元素会尽可能全部出现在视口中，可能的话，调用元素的底部会与视口顶部平齐，不过顶部不一定平齐。

支持的浏览器：IE、Chrome、Firefox、Safari和Opera。

该方法是唯一一个所有浏览器都支持的方法，类似还有如下方法，但是只有在Chrome和Safari有效：

scrollIntoViewIfNeeded(alignCenter)

scrollByLines(LineCount)

注意点3 如果是在弹层里出现此问题，那么则直接改变定位高度即可。

希望能帮助到大家。

巴特西

:input获得焦点时被弹出键盘挡住解决办法

最新文章

热门文章