iOS webview html5 移動端 軟鍵盤彈起遮擋輸入框

移動web聊天頁面，輸入框在底部的時候，點擊輸入，彈起軟鍵盤，iOS在將頁面推上的時候會回彈一下，導致鍵盤剛好遮擋到輸入框。

專注于為中小企業提供網站建設、網站設計服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業福鼎免費做網站提供優質的服務。我們立足成都，凝聚了一批互聯網行業人才，有力地推動了千余家企業的穩健成長，幫助中小企業通過網站建設實現規模擴充和轉變。

初次觸發輸入框的focus的時候，iOS 鍵盤默認是以英文鍵盤高度推上頁面，但一般我們的默認輸入是中文，會導致軟鍵盤的高度變化，中文輸入鍵盤高度高于英文，所以導致了遮擋。

Element.scrollIntoViewIfNeeded() 方法用來將不在瀏覽器窗口的可見區域內的元素滾動到瀏覽器窗口的可見區域。 如果該元素已經在瀏覽器窗口的可見區域內，則不會發生滾動。 此方法是標準的 Element.scrollIntoView() 方法的專有變體。

當鍵盤在切換中英輸入法時，鍵盤高度變化仍然會引起鍵盤遮擋

監聽輸入框的 focus 、 blur 事件，當聚焦時，循環調用 input.scrollIntoViewIfNeeded 方法。

當監聽到 blur 時，停止循環。

移動端html5網站，如何設置輸入框鍵盤的“搜索”“前往”按鈕 - input type

顯示搜索按鈕需要滿足3個條件：

1.input在form標簽中

2.form標簽設置了action屬性值

3.input設置type為search

示例如下：

form action="#"

input type="search" /

/form

這種情況下點擊搜索按鈕會跳轉到action對應的地址進行搜索

如果我們需要js來處理搜索邏輯，可以設置form不提交，并且監聽輸入框的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

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

end

HTML5 input焦點鍵盤彈出問題

最近項目有個需求，我們使用的是PDA裝置，它有掃描槍，可以讓掃描出來的內容填寫到html的input控件中。

但是有一個棘手問題，就是input控件只要獲取焦點，就會彈出鍵盤。

項目的需求，希望剛開始時，只是將焦點聚集在input控件上，可以通過掃描槍輸入，然后點擊input控件時，還能彈出鍵盤進行修改。

這個問題解決核心就是 input控件聚焦的時候，不彈出鍵盤，當點擊的時候，才彈出鍵盤。

嘗試了很多方法，最后發現了readOnly屬性一個詭異作用。當調用 input控件的focus()方法時，如果readOnly屬性為true，那么不會彈出鍵盤，但是焦點已經在 input控件上了。這個時候，再將readOnly屬性設置為false，那么這個時候鍵盤不會彈出，但是可以掃描槍輸入了。

示例:

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

Onclick 單擊事件

Onload 載入事件

Onfocus 獲得焦點事件

Hover鼠標經過事件