- 在ios中軟鍵盤彈起時,僅會引發
$('body').scrollTop
值改變,可是咱們能夠經過輸入框的獲取焦點狀況來作判斷,但也只能在ios中採用這個方案,由於在android中存在主動收起鍵盤後,但輸入框並無失焦,而ios中鍵盤收起後就會失焦;
- 在android中軟鍵盤彈起或收起時,會改變window的高度,所以監聽window的
onresize
事件;
1、Android端監聽
//獲取原窗口的高度
let originalHeight = document.documentElement.clientHeight || document.body.clientHeight
window.οnresize = function() {
//鍵盤彈起與隱藏都會引發窗口的高度發生變化
let resizeHeight = document.documentElement.clientHeight || document.body.clientHeight
if (resizeHeight < originalHeight) {
//當鍵盤彈起,在此處操做
} else {
//當鍵盤收起,在此處操做
}
}
2、IOS端監聽
/**
* 2、ios
*
* focusin和focusout支持冒泡,對應focus和blur,
* 使用focusin和focusout的緣由是focusin和focusout能夠冒泡,focus和blur不會冒泡,
* 這樣就能夠使用事件代理,處理多個輸入框存在的狀況。
*/
if (isIos) {
document.body.addEventListener('focusin', () => {
//軟鍵盤彈出的事件處理
})
document.body.addEventListener('focusout', () => {
//軟鍵盤收起的事件處理
})
}