解決IOS鍵盤彈起輸入內容後鍵盤隱藏頁面顯示問題
阿新 • • 發佈:2021-07-08
IOS相容問題,在我們彈起鍵盤輸入內容後,鍵盤隱藏往往會使得頁面顯示不完全,頁面內容不下滑,導致頁面空了一大塊;
原因是:在輸入內容後,雖然隱藏了鍵盤,但是鍵盤還是佔位的
解決方法:
<div id="app"> <div class="list-warp"> <div class="title_name"> <span>姓名</span> </div> <div class="content"> <input type="text" class="content_input" placeholder="請輸入姓名" v-model="peopleList" @focus="changefocus()" @blur.prevent="changeBlur()"> </div> </div> </div>
<script> let app=new Vue({ el:'#app', data:{ peopleList:'zhangsan' }, methods:{ changeBlur(){ 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) } }, changefocus(){} } })</script>