webapp开发下input获取焦点时被弹出键盘挡住解决方法
$('input').on('click', function () { var target = this; setTimeout(function(){ target.scrollIntoViewIfNeeded(); // target.scrollIntoView(); },200); });
scrollIntoViewIfNeeded仅在Android,Safari Mobile下支持
scrollIntoView相对各浏览器支持较好
实测总结:
1.当input在底部时,用scrollIntoView会比输入法多出一行文字的高度,scrollIntoViewIfNeeded不会
2.发现一个ios11的兼容性问题,如果页面的上下文是绝对定位,类似聊天窗口的样式,
在ios11下,如果弹出软键盘了,那此时不能有设置窗体滚动的操作(document.dody.scrollTop),如果设置了页面滚动到某一位置。滚动就会置顶。
后来发现原因,是因为绝对定位的问题,使其无法识别高度,所以可以在输入框onfocus时底部增加一个非绝对定位的元素,使其能识别出当前页面是可滚动的即可。
注:不要给body设置-weblit-overflow-scrolling: touch;会导致页面显示异常。
<div style="height:100%"> <div style="position: relative; height: 100%;"> 这里用绝对定位布局 …… </div> <!--这是占位, 解决iphone ios 11针对绝对定位识别问题而增加的占位,当软键盘弹出时,需要整个页面可滚动才行 --> <div style="height:300px;" v-if="isIOS11 && showPlaceholder"> </div> </div>