H5移动端input输入框常见问题解决办法

1.ios键盘唤起，键盘收起以后页面不归位

原因： 固定定位的元素 在元素内 input 框聚焦的时候 弹出的软键盘占位 失去焦点的时候软键盘消失 但是还是占位的 导致input框不能再次输入。

解决：

在input里加 @blur.prevent="changeBlur()"

<el-input 
  @blur.prevent="changeBlur()"  
  placeholder="请输入姓名" 
  prefix-icon="el-icon-user" 
  v-model="form.memberName" 
  name="memberName">
</el-input>

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

position: fixed的元素在ios里，收起键盘的时候会被顶上去，特别是第三方键盘。

2.安卓弹出的键盘遮盖文本框

解决：

给input标签添加focus事件，先判断是不是安卓手机下的操作，Document 对象属性和方法，setTimeout延时0.5秒，因为调用安卓键盘有一点迟钝，导致如果不延时处理的话，滚动就失效了。

<el-input 
  @blur.prevent="changeBlur()"  
  @focus="changefocus()"//添加focus事件
  placeholder="请输入姓名" 
  prefix-icon="el-icon-user" 
  v-model="form.memberName" 
  name="memberName">
</el-input>

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

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

就这样，End~