手機瀏覽器呼出軟鍵盤遮擋住輸入框問題。

2021-09-29 20:12:07 字數 701 閱讀 5564

在手機瀏覽器中如果我們給body設定了高度,然後我們通過input輸入框呼出軟鍵盤,如果輸入框在頁面下方,內容會被軟鍵盤遮擋住,我們只有滑動滾動條才能看到輸入框,這樣會很麻煩,也不利於使用者體驗。
我們可以通過scrollintoviewifneeded()方法來解決問題。

element.scrollintoview()方法讓當前的元素滾動到瀏覽器視窗的可視區域內。

element.scrollintoviewifneeded()方法也是用來將不在瀏覽器視窗的可見區域內的元素滾動到瀏覽器視窗的可見區域。但如果該元素已經在瀏覽器視窗的可見區域內,則不會發生滾動。此方法是標準的element.scrollintoview()方法的專有變體。

因而再有什麼回到頂部、去到置頂位置和鍵盤彈出擋住輸入框之類的需求,都可以簡單解決了。

>

class

="box"

>

>

ul>

div>

body

>

>$(

function()

$(".box li input[type='text']").

on("focus"

,function()

,300);

})})

script

>

手機客戶端阻止手機軟鍵盤彈出

禁止縮放 user scalable no yes 設定使用者縮放 禁止拖動 document.ontouchmove function e 文件禁止 touchmove事件 有用 document.documentelement.style.webkittouchcallout none 禁止彈出...

防止手機頁面軟鍵盤調出時布局被擠壓

獲取裝置高度 軟鍵盤調出來時高度也會變小,所以在點選事件前獲取 var deviceh document.documentelement.clientheight px 表單獲得焦點後動態改變body和背景的大小 select,input on click function 失去焦點後還原 sele...

pc瀏覽器模擬手機瀏覽器

很多 都通過user agent來判斷瀏覽器型別,如果是3g手機,顯示手機頁面內容,如果是普通瀏覽器,顯示普通網頁內容 谷歌chrome瀏覽器,可以很方便地用來當3g手機模擬器。在windows的 開始 執行 中輸入以下命令,啟動 谷歌瀏覽器,即可模擬相應手機的瀏覽器去訪問3g手機網頁 谷歌andr...