1. 程式人生 > >移動端input輸入框調起,頁面上推,輸入框關閉無法恢復

移動端input輸入框調起,頁面上推,輸入框關閉無法恢復

輸入框 input 無法 失去 移動端 當前 焦點 生效 寫法

最近做h5 input調起輸入框,頁面上推,輸入框關閉無法恢復的問題,當時就覺得很奇怪,因為是整個body上推 ,無法恢復,但是稍微點擊一下屏幕,body就恢復了,所以當時想的解決方案就是當輸入框失去焦點的可以讓頁面動一下。

首先給input綁定上失去焦點函數

<input @blur.prevent="blur()">(這裏用的vue寫法)

所以想到的第一個解決方案就是

blur:function(){

setTimeout(()=>{

document.body.style.paddingBottom = "10px"

setTimeout(()=>{

document.body.style.paddingBottom = "0px"

},100)

},100)

}

確實生效了,可是感覺代碼好多,後來就在網上找到了別人的一種解決方案

blur:function(){

  scrollTo(0, pageYOffset)

}

當前也生效了就成功解決那個body上推無法回復的問題(上述問題,發生在ios系統上)

移動端input輸入框調起,頁面上推,輸入框關閉無法恢復