1.ios鍵盤(pán)喚起，鍵盤(pán)收起以后頁(yè)面不歸位

原因： 固定定位的元素 在元素內(nèi) input 框聚焦的時(shí)候 彈出的軟鍵盤(pán)占位 失去焦點(diǎn)的時(shí)候軟鍵盤(pán)消失 但是還是占位的 導(dǎo)致input框不能再次輸入。

解決：

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

<el-input 
  @blur.prevent="changeBlur()"  
  placeholder="請(qǐng)輸入姓名" 
  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里，收起鍵盤(pán)的時(shí)候會(huì)被頂上去，特別是第三方鍵盤(pán)。

2.安卓彈出的鍵盤(pán)遮蓋文本框

解決：

給input標(biāo)簽添加focus事件，先判斷是不是安卓手機(jī)下的操作，Document 對(duì)象屬性和方法，setTimeout延時(shí)0.5秒，因?yàn)檎{(diào)用安卓鍵盤(pán)有一點(diǎn)遲鈍，導(dǎo)致如果不延時(shí)處理的話，滾動(dòng)就失效了。

<el-input 
  @blur.prevent="changeBlur()"  
  @focus="changefocus()"http://添加focus事件
  placeholder="請(qǐng)輸入姓名" 
  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()方法讓當(dāng)前的元素滾動(dòng)到瀏覽器窗口的可視區(qū)域內(nèi)。 Element.scrollIntoViewIfNeeded()方法也是用來(lái)將不在瀏覽器窗口的可見(jiàn)區(qū)域內(nèi)的元素滾動(dòng)到瀏覽器窗口的可見(jiàn)區(qū)域。但如果該元素已經(jīng)在瀏覽器窗口的可見(jiàn)區(qū)域內(nèi)，則不會(huì)發(fā)生滾動(dòng)。

就這樣，End~