iOS webview html5 移動(dòng)端 軟鍵盤彈起遮擋輸入框

移動(dòng)web聊天頁(yè)面，輸入框在底部的時(shí)候，點(diǎn)擊輸入，彈起軟鍵盤，iOS在將頁(yè)面推上的時(shí)候會(huì)回彈一下，導(dǎo)致鍵盤剛好遮擋到輸入框。

專注于為中小企業(yè)提供網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)福鼎免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了千余家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

初次觸發(fā)輸入框的focus的時(shí)候，iOS 鍵盤默認(rèn)是以英文鍵盤高度推上頁(yè)面，但一般我們的默認(rèn)輸入是中文，會(huì)導(dǎo)致軟鍵盤的高度變化，中文輸入鍵盤高度高于英文，所以導(dǎo)致了遮擋。

Element.scrollIntoViewIfNeeded() 方法用來(lái)將不在瀏覽器窗口的可見(jiàn)區(qū)域內(nèi)的元素滾動(dòng)到瀏覽器窗口的可見(jiàn)區(qū)域。 如果該元素已經(jīng)在瀏覽器窗口的可見(jiàn)區(qū)域內(nèi)，則不會(huì)發(fā)生滾動(dòng)。 此方法是標(biāo)準(zhǔn)的 Element.scrollIntoView() 方法的專有變體。

當(dāng)鍵盤在切換中英輸入法時(shí)，鍵盤高度變化仍然會(huì)引起鍵盤遮擋

監(jiān)聽(tīng)輸入框的 focus 、 blur 事件，當(dāng)聚焦時(shí)，循環(huán)調(diào)用 input.scrollIntoViewIfNeeded 方法。

當(dāng)監(jiān)聽(tīng)到 blur 時(shí)，停止循環(huán)。

移動(dòng)端html5網(wǎng)站，如何設(shè)置輸入框鍵盤的“搜索”“前往”按鈕 - input type

顯示搜索按鈕需要滿足3個(gè)條件：

1.input在form標(biāo)簽中

2.form標(biāo)簽設(shè)置了action屬性值

3.input設(shè)置type為search

示例如下：

form action="#"

input type="search" /

/form

這種情況下點(diǎn)擊搜索按鈕會(huì)跳轉(zhuǎn)到action對(duì)應(yīng)的地址進(jìn)行搜索

如果我們需要js來(lái)處理搜索邏輯，可以設(shè)置form不提交，并且監(jiān)聽(tīng)輸入框的keydown事件

示例如下：

form action="#" onsubmit="return false"

input type="search" id="t_search" /

/form

script type="text/javascript"

$("#txt_search").keydown(function (e) {

if (e.keyCode == 13) {

//搜索處理

}

});

/script

還有一個(gè)前往按鈕，也類似，把type換成text就可以了，所以form很重要，如果我們不放form，就是“換行”按鈕了。

end

HTML5 input焦點(diǎn)鍵盤彈出問(wèn)題

最近項(xiàng)目有個(gè)需求，我們使用的是PDA裝置，它有掃描槍，可以讓掃描出來(lái)的內(nèi)容填寫到html的input控件中。

但是有一個(gè)棘手問(wèn)題，就是input控件只要獲取焦點(diǎn)，就會(huì)彈出鍵盤。

項(xiàng)目的需求，希望剛開(kāi)始時(shí)，只是將焦點(diǎn)聚集在input控件上，可以通過(guò)掃描槍輸入，然后點(diǎn)擊input控件時(shí)，還能彈出鍵盤進(jìn)行修改。

這個(gè)問(wèn)題解決核心就是 input控件聚焦的時(shí)候，不彈出鍵盤，當(dāng)點(diǎn)擊的時(shí)候，才彈出鍵盤。

嘗試了很多方法，最后發(fā)現(xiàn)了readOnly屬性一個(gè)詭異作用。當(dāng)調(diào)用 input控件的focus()方法時(shí)，如果readOnly屬性為true，那么不會(huì)彈出鍵盤，但是焦點(diǎn)已經(jīng)在 input控件上了。這個(gè)時(shí)候，再將readOnly屬性設(shè)置為false，那么這個(gè)時(shí)候鍵盤不會(huì)彈出，但是可以掃描槍輸入了。

示例:

html5中常用的鍵盤事件有哪些

Onclick 單擊事件

Onload 載入事件

Onfocus 獲得焦點(diǎn)事件

Hover鼠標(biāo)經(jīng)過(guò)事件