H5 IOS 虚拟键盘不回落的问题

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

解决办法（最后加上是否是微信浏览器）：

方法一：

　　document.addEventListener('focusout', () => {

      setTimeout(() => {

        let height = document.documentElement.scrollTop || document.body.scrollTop

        window.scrollTo(0, height + 1)

        window.scrollTo(0, height - 1)

      }, 20)

    })

 

方法二：
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()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动

 

 

 

 

 

 

IOS 中光标错位或过长问题：

　　导致原因：input 设置了 line-height 或 fixed 导致。解决办法去掉 line-height，设置 height 或使用 absolution

 去掉 select 中默认下拉小箭头

IE ： select::-ms-expand { display: none; }   /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
chorme：

 /*为下拉小箭头留出一点位置，避免被文字覆盖*/
  padding-right:34px; padding-left: 10px;
 /*将默认的select选择框样式清除*/
  appearance:none;  -moz-appearance:none;   -webkit-appearance:none;
  background: url("/assets/img/caret.png") no-repeat scroll right center transparent;