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

創(chuàng)新互聯(lián)公司是一家專注于成都網(wǎng)站制作、成都做網(wǎng)站與策劃設計,潮南網(wǎng)站建設哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設十余年,網(wǎng)設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:潮南等地區(qū)。潮南做網(wǎng)站價格咨詢:18980820575

實測

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

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

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

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

解決方案：

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

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

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

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

解決方案：

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

當虛擬鍵盤彈出的時候，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);
        }
    })
}

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

名稱欄目：H5頁面軟鍵盤常見問題-創(chuàng)新互聯(lián)
文章位置：http://weahome.cn/article/jghhh.html