移動端h5監聽鍵盤彈出和收起

  1. 在ios中軟鍵盤彈起時,僅會引發 $('body').scrollTop 值改變,可是咱們能夠經過輸入框的獲取焦點狀況來作判斷,但也只能在ios中採用這個方案,由於在android中存在主動收起鍵盤後,但輸入框並無失焦,而ios中鍵盤收起後就會失焦;
  2. 在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', () => {
    //軟鍵盤收起的事件處理
  })
}
相關文章
相關標籤/搜索