H5頁面軟鍵盤常見問題

一、需求：進入頁面自動聚焦輸入框，并彈出軟鍵盤

實測

1、通過js執(zhí)行focus()，安卓下只聚焦，出現(xiàn)光標(biāo)，不彈出軟鍵盤；IOS下連光標(biāo)都未出現(xiàn)。

2、增加autofocus屬性，結(jié)果同上。

3、將代碼放入延遲函數(shù)setTimeout 中執(zhí)行，結(jié)果同上。

4、通過button點擊執(zhí)行focus()，文本框聚焦且彈出軟鍵盤

解決方案：

1、通過點擊屏幕的其他區(qū)域，然后觸發(fā)input的focus事件,喚起鍵盤：

進入頁面后，給頁面加一層遮罩層，點擊遮罩層時關(guān)閉該層并執(zhí)行focus()。

2、重寫input輸入框及軟鍵盤

二、問題：當(dāng)輸入信息時彈出軟鍵盤，因手機屏幕有限汪汪會遮住輸入框

解決方案：

scrollIntoViewIfNeeded：只在當(dāng)前元素在視窗的可見范圍內(nèi)不可見的情況下，才滾動瀏覽器窗口或容器元素，最終讓當(dāng)前元素可見。

當(dāng)虛擬鍵盤彈出的時候，window的resize事件會被觸發(fā)。

監(jiān)聽input元素的focus事件，以及window的resize事件。因為focus事件將在resize事件前觸發(fā)。然后通過scrollIntoViewIfNeeded使輸入框可見。

1、監(jiān)聽input元素的focus事件

var inputs = document.getElementsByTagName("input");
for (var i = 0; i< inputs.length; i++) {
    inputs[i].onclick = function (e) {
        window.setTimeout(function () {
            e.target.scrollIntoViewIfNeeded();
        }, 0);
    }
}

2、監(jiān)聽window的resize事件

if (/Android/gi.test(navigator.userAgent)) {
    window.addEventListener('resize', function () {
        if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
            window.setTimeout(function () {
                document.activeElement.scrollIntoViewIfNeeded();
            }, 0);
        }
    })
}