跳到主要內容
前端開發

JavaScript 虛擬鍵盤高度偵測筆記

2018 年透過 resize 前後的視窗高度差,判斷手機虛擬鍵盤是否彈出的筆記。

W

這段程式會記錄頁面原本的高度,並在 resize 時比較目前高度,判斷手機虛擬鍵盤是否彈出。

$(function () {
  var winHeight = $(window).height();
  $('.num').append('原高度:' + winHeight);

  $(window).resize(function () {
    var thisHeight = $(this).height();
    $('.num').append('此高度:' + thisHeight);

    if (winHeight - thisHeight > 50) {
      // 當軟鍵盤彈出,在這裡操作
      $('body').css('height', winHeight + 'px');
      $('body').css('background', 'red');
      $('.num').append('鍵盤彈出後高度:' + winHeight);
    } else {
      // 當軟鍵盤收起,在這裡操作
      $('body').css('height', '100%');
      $('.num').append('鍵盤收起:' + winHeight);
    }
  });
});
分享這篇