H5页面 在iphone ios系统虚拟键盘不会落的问题

在 H5 页面中，会发现在高版本的 IOS 系统中（ios12以上）和微信版本6.7.x以上，都会发现 input 等输入框，输入内容之后发现虚拟键盘消失，但是页面出现大面积白框。

解决办法

方法一

在页面中添加下面的js代码

document.addEventListener('focusout', () => { setTimeout(() => { let height = document.documentElement.scrollTop || document.body.scrollTop window.scrollTo(0, height + 1) window.scrollTo(0, height - 1) }, 20) })

方法二

input失去焦点时, 调用下面方法

function changeBlue(){ 　　let u = navigator.userAgent, app = navigator.appVersion; 　　let isIOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); 　　if(isIOS){ 　　　　 setTimeout(() => { 　　　　　　const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0 　　　　　　window.scrollTo(0, Math.max(scrollHeight - 1, 0)) 　　　　}, 200) 　　} }

解决安卓弹出的键盘遮盖文本框

changeblue(){ 　　　　let u = navigator.userAgent, app = navigator.appVersion; 　　　　let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; 　　　　if(isAndroid){ 　　　　　　setTimeout(function() { 　　　　　　　　 document.activeElement.scrollIntoViewIfNeeded(); 　　　　　　　　 document.activeElement.scrollIntoView(); 　　　　　　}, 500); 　　　　} 　　}

Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内。而Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动

转载于 https://www.cnblogs.com/xqmyhome/p/11066132.html