1. 程式人生 > 其它 >解決IOS鍵盤彈起輸入內容後鍵盤隱藏頁面顯示問題

解決IOS鍵盤彈起輸入內容後鍵盤隱藏頁面顯示問題

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>