input在微信iOS,點擊輸入法的完成後白屏問題

input,fixed在iOS坑點太多,不一一贅述,google有太多的demo可借鑑html

昨天遇到個bug,輸入框把底部彈出以後,收回時背景沒有收回;ios

bug機型:iphone6,iphone6s (沒有別的測試機,哭窮昂~)git

以下圖所示:github

解決方案: 監聽input的bulr事件,而後重置body的scrollTop;web

<input @blur="inputBlur" type="text" v-model="phone" placeholder="輸入手機號">
複製代碼
inputBlur() {
      if(is_weixin() && getDevice().model == 'iPhone') {
        setTimeout(() => {
          document.body.scrollTop = 0;
        }, 200)
      }
    }
複製代碼

另外推薦個很好用的,微信調試工具:vconsolebash

html文件中引入能夠直接使用。微信

<script src="https://s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js"></script>
複製代碼

小記:這算是我寫的第一篇文章吧,文筆很差,markdown也不熟練,又不善於表達,遇到問題一直baidu or google,昨天遇到這個問題,查了不少資料都沒有相關,後來靜下來慢慢調試找出來,ios的鍵盤彈出不會觸發window的resize事件,可是會有focus和bulr的事件,bulr以後body的滾動條沒有重置,只好手動重置了,有時間在補充fixed,input在移動端的問題吧。markdown

ps:有問題的話謝謝各位大佬指正。iphone

相關文章
相關標籤/搜索