HTML5 行動網頁：解決輸入框被 Android 軟鍵盤遮擋的問題

問題現象

在 Android 手機瀏覽器中，當使用者點擊輸入框彈出軟鍵盤時，頁面底部的表單欄位被鍵盤遮蓋，導致使用者無法看見輸入內容或點擊送出按鈕。監聽 keydown/keyup 事件無法捕捉鍵盤上的「隱藏/完成」鍵（keyCode 均為 0），resize 事件在部分機型也不可靠。

核心思路：監聽視窗高度變化

軟鍵盤彈出/收起會改變 window.innerHeight。利用 setInterval 定時檢測高度變化，即可判斷鍵盤狀態。

完整實作範例（原生 JS + jQuery）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>
  <input type="text" id="txt" placeholder="點擊輸入..." />
  <div id="dv" style="margin-top:20px; color:#333;"></div>

  <script>
    var timer, windowInnerHeight;

    function eventCheck(e) {
      if (e) { // 由 focus/blur/click 觸發
        $('#dv').html('Android 鍵盤' + (e.type === 'focus' ? '彈出' : '隱藏') + ' -- 透過 ' + e.type + ' 事件');
        if (e.type === 'click') {
          // 點擊輸入框時啟動定時器，等待鍵盤動畫結束
          setTimeout(function() {
            windowInnerHeight = window.innerHeight; // 記錄鍵盤彈出後的高度
            timer = setInterval(eventCheck, 100);   // 開始輪詢
          }, 500);
        } else {
          clearInterval(timer); // blur 時停止輪詢
        }
      } else { // 由定時器觸發
        // 若視窗高度變大，表示鍵盤已收起（使用者按下隱藏鍵）
        if (window.innerHeight > windowInnerHeight) {
          clearInterval(timer);
          $('#dv').html('Android 鍵盤隱藏 -- 偵測到視窗高度增加');
        }
      }
    }

    $('#txt').on('click focus blur', eventCheck);
  </script>
</body>
</html>

關鍵點解析

• 500ms 延遲：等待鍵盤彈出動畫完成，取得穩定的 window.innerHeight。
• 100ms 輪詢：平衡即時性與效能，偵測使用者點擊鍵盤右下角「隱藏」鍵導致的高度變化。
• 事件綁定：同時監聽 click（啟動輪詢）、focus/blur（輔助顯示狀態）。
• 相容性：在 Android Chrome、WebView 中測試通過；iOS Safari 通常不會遮擋固定定位元素，另有處理方式。

替代方案

• CSS position: fixed; bottom: 0 讓關鍵按鈕固定在可視區底部（需注意 iOS 鍵盤彈出時 fixed 定位失效問題）。
• 使用 visualViewport API（現代瀏覽器支援）精確獲取可視區尺寸變化。
• 引入成熟庫如 cordova-plugin-ionic-keyboard（Hybrid App）或 react-native-keyboard-aware-scroll-view（React Native）。

總結

透過定時器監測 window.innerHeight 變化，是目前純 Web 端偵測 Android 軟鍵盤隱藏/顯示最穩健的通用方案。結合適當的 CSS 佈局，可有效解決表單被遮擋的體驗問題。