ios中软键盘问题,软键盘弹起遮住input,input失去焦点ios页面底部空白页面被顶上去

1,404 阅读1分钟

ios中软键盘问题,软键盘弹起遮住input,input失去焦点ios页面底部空白(页面被顶上去)

一.在ios中,input弹框被软键盘挡住,在body中加入这段代码即可

(function () {
window.addEventListener('resize',function () { tid = setTimeout(function () { if(document.activeElement.tagName === 'INPUT'){ window.setTimeout(function() { if('scrollIntoView' in document.activeElement) { document.activeElement.scrollIntoView(); } else { document.activeElement.scrollIntoViewIfNeeded(); } }, 0); } },300) }); })()

二.苹果手机软键盘弹出,当input失去焦点的时候,手机底部空白(一般是在全屏设计图的情况下):

(1)如果是全屏设计页面,在弹框弹起的时候,获取当前滚动条的高度

;,存起来,在input失去焦点onBlur的时候。令滚动条的高度恢复

onBlur() { setTimeout(function() { var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0; window.scrollTo(0, Math.max(scrollHeight - 1, 0)); console.log("scrollTo1:" + Math.max(scrollHeight - 1, 0)); }, 1);
this.$refs.boxscroll.scrollTop = this.scrolltoptext; } (2)如果不是全屏手机,既长度很长的设计页面,想要在弹框消失的时候还是原来的位置: 既获取当前滚动条的高度this.scrolltoptext;,存起来,在失去焦点的时候即可 onBlur() {
this.refs.boxscroll.scrollTop = this.scrolltoptext; },