如何在移动设备弹出软键盘时自动上移页面内容以避免遮挡输入框_技术教程

本文介绍在 ios 和 android 原生 webview 场景下，解决软键盘弹出时遮挡输入框的问题，重点提供 android 中通过动态监听视口变化并设置底部 padding 的可靠实现方案，并说明 ios safari 的固有限制与替代建议。

在移动端 Web 开发中，软键盘（Soft Keyboard）弹出导致输入框被遮挡是一个高频且棘手的问题，尤其在混合开发（Hybrid App）中使用 WebView 加载网页时更为突出。iOS Safari 由于系统限制，无法通过 JavaScript 或 CSS 可靠触发页面滚动或重排来避开键盘；而 Android 原生 WebView 虽无官方 API 直接监听键盘状态，但可通过 ViewTreeObserver.OnGlobalLayoutListener 捕获窗口可视区域（getWindowVisibleDisplayFrame）的动态变化，从而间接推断键盘是否展开，并据此调整布局。

以下是在 Android Kotlin 中实现页面内容“上移”效果的核心方案（本质是为 WebView 容器添加动态底部 Padding，腾出键盘高度空间）：

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    // 延迟执行，确保布局已初步完成
    Handler(Looper.getMainLooper()).postDelayed({ monitorKeyboardState() }, 500)
}

private fun monitorKeyboardState() {
    pActivity?.let { activity ->
        val statusBarHeightInPx = dpToPx(activity.statusBarHeight.toFloat())
        val toolbarHeight = binding.webViewToolbar.height

        binding.webViewMainLayout.viewTreeObserver.addOnGlobalLayoutListener { layoutView ->
            val r = Rect()
            layoutView.getWindowVisibleDisplayFrame(r)

            // 计算键盘高度 ≈ rootView 高度 - 可视区域高度 - 状态栏 - 工具栏
            val heightDiff = layoutView.rootView.height - r.height() - statusBarHeightInPx - toolbarHeight

            // 若 heightDiff 显著（如 > 200dp），视为键盘已弹出；否则视为收起
            val paddingBottom = if (heightDiff > 200) heightDiff.toInt() else 0

            // 使用主线程更新 Padding（避免线程异常）
            Handler(Looper.getMainLooper()).post {
                layoutView.setPadding(0, 0, 0, paddingBottom)
            }
        }
    }
}

private fun dpToPx(dp: Float): Float {
    context?.resources?.displayMetrics?.let { metrics ->
        return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, metrics)
    } ?: return dp
}

✅ 关键说明与注意事项：

延迟初始化：postDelayed(..., 500) 是必要的，可规避 OnGlobalLayoutListener 在布局未完全就绪时误触发；
高度阈值判断：heightDiff > 200 用于过滤微小布局抖动（如横竖屏切换、状态栏变化），避免误判键盘状态；
Padding 替代 Scroll：相比 scrollIntoView() 或 window.scrollTo()，动态 Padding 更稳定，不干扰 WebView 内部滚动逻辑；
iOS 限制提醒：Safari（包括 WKWebView）不支持任何可靠的键盘显示/隐藏事件监听（resize、focus 等均不可靠），因此推荐前端配合使用 viewport 设置（如）并启用 scrollIntoView({ behavior: 'smooth', block: 'nearest' }) 作为辅助手段，但需接受其在部分场景下失效；
性能优化：OnGlobalLayoutListener 触发频繁，务必在 Fragment/Activity 销毁时移除监听器（示例中未展示，实际使用需调用 viewTreeObserver.removeOnGlobalLayoutListener()）。