關於幾個移動端軟鍵盤的坑及其解決方案

時間 2019-11-29

標籤關於幾個移動鍵盤及其解決方案欄目無線简体版

原文原文鏈接

一、IOS 鍵盤彈起擋住原來的視圖

能夠經過監聽移動端軟鍵盤彈起javascript

window.addEventListener('resize', function() {
  if (
    document.activeElement.tagName === 'INPUT' ||
    document.activeElement.tagName === 'TEXTAREA'
  ) {
    window.setTimeout(function() {
      if ('scrollIntoView' in document.activeElement) {
        document.activeElement.scrollIntoView(false)
      } else {
        document.activeElement.scrollIntoViewIfNeeded(false)
      }
    }, 0)
  }
})
複製代碼

二、onkeyUp 和 onKeydown 兼容性問題

IOS 中 input 鍵盤事件 keyup、keydown、等支持不是很好, 用 input 監聽鍵盤 keyup 事件，在安卓手機瀏覽器中沒有問題，可是在 ios 手機瀏覽器中用輸入法輸入以後，並未馬上相應 keyup 事件css

三、IOS12 輸入框難以點擊獲取焦點，彈不出軟鍵盤

定位找到問題是 fastclick.js 對 IOS12 的兼容性，可在 fastclick.js 源碼或者 main.js 作如下修改html

FastClick.prototype.focus = function(targetElement) {
  var length
  if (
    deviceIsIOS &&
    targetElement.setSelectionRange &&
    targetElement.type.indexOf('date') !== 0 &&
    targetElement.type !== 'time' &&
    targetElement.type !== 'month'
  ) {
    length = targetElement.value.length
    targetElement.setSelectionRange(length, length)
    targetElement.focus()
  } else {
    targetElement.focus()
  }
}
複製代碼

四、IOS 鍵盤收起時頁面沒用回落，底部會留白

經過監聽鍵盤迴落時間滾動到原來的位置java

window.addEventListener('focusout', function() {
  window.scrollTo(0, 0)
})

//input輸入框彈起軟鍵盤的解決方案。
var bfscrolltop = document.body.scrollTop
$('input')
  .focus(function() {
    document.body.scrollTop = document.body.scrollHeight
    //console.log(document.body.scrollTop);
  })
  .blur(function() {
    document.body.scrollTop = bfscrolltop
    //console.log(document.body.scrollTop);
  })
複製代碼

五、IOS 下 fixed 失效的緣由

軟鍵盤喚起後，頁面的 fixed 元素將失效，變成了 absolute，因此當頁面超過一屏且滾動時，失效的 fixed 元素就會跟隨滾動了。不只限於 type=text 的輸入框，凡是軟鍵盤（好比時間日期選擇、select 選擇等等）被喚起，都會遇到一樣地問題。ios

解決方法: 不讓頁面滾動，而是讓主體部分本身滾動,主體部分高度設爲 100%，overflow:scrollweb

<body>
  <div class='warper'>
    <div class='main'></div>
  <div>
  <div class="fix-bottom"></div>
</body>
複製代碼

.warper {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; /* 解決ios滑動不流暢問題 */
}
.fix-bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
}
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。