移動端關於軟鍵盤的兩個問題

時間 2019-11-16

標籤移動關於鍵盤兩個問題欄目無線简体版

原文原文鏈接

移動端關於軟鍵盤的問題主要有兩個：javascript

軟鍵盤的彈出致使頁面的佈局錯亂的問題
某些表單頁面，須要一進入頁面就獲取焦點，並彈出軟鍵盤

先來看下第一個問題，以下圖所示 html

在這個頁面中，正常狀況下，二維碼受權是絕對定位在頁面底部的，軟鍵盤彈起時，因爲頁面收縮，致使絕對定位在鍵盤上方。

網上的解決方案中，有在軟鍵盤彈出時，將絕對定位改成相對定位，經測試，這種方法，不行，由於頁面html元素和body元素的高度設置都爲100%，正因如此，軟鍵盤彈起時，頁面纔會被壓縮java

還有一種解決方案，此種方案針對安卓機型，監聽頁面中window.resize事件，這種方法親測有效，代碼以下函數

const htmlHeight = window.getComputedStyle(document.querySelector('html'), null).getPropertyValue('height').slice(0, -2);
window.onresize = () => {
    //在這裏判斷頁面的高度與初始高度的差距，若大於某一閾值，則斷定爲軟鍵盤彈起
    const thisHeight = window.getComputedStyle(document.querySelector('html'), null).getPropertyValue('height').slice(0, -2);
    if(htmlHeight - thisHeight > 140) {
        //判斷爲軟鍵盤彈起，將元素隱藏掉
    }
}
複製代碼

其中，獲取頁面高度的方法不惟一。還有針對Ios的方案，不過這種方案沒有驗證過，存疑，監聽input元素的focus,blur事件，作顯示和隱藏的判斷。佈局

再看下第二個問題，一進入頁面就獲取焦點，並自動彈出軟鍵盤。測試

關於這個問題，網上的說法也是很是多，autofocus，el.click()，el.focus()，網上的說法是，這些方法兼容性很差，可是經我驗證，這些方法都不起做用！！（難道是我手機太差）ui

只有一種方案可行this

軟鍵盤的彈起，只對用戶操做的事件有效spa

意思就是不能直接觸發focus事件，不過能夠給其餘元素綁定一個click事件，在回調函數中去觸發focus事件，不過有一點，在頁面剛剛加載完成時，可能也不會生效，所以，須要找到一個能使軟鍵盤彈出的時間節點，依靠setTimeout去進行延遲執行，代碼以下code

<html>
    <body>
        <label for="username"></label>
        <input id="username" />
    </body>
    <script> document.querySelector('label').onclick = () => { document.querySelector('#username').focus(); } setTimeout(() => { document.querySelector('label').click(); }, 1000) </script>
</html>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。