当前位置：首页 > news >正文

ios弹窗聚焦问题

news 2026/5/12 12:53:24

iOS 键盘弹出后输入框被遮挡 / 被顶上去的终极解决方案

结合你React + 全屏弹窗（Popup）+ textarea 的场景，iOS 键盘拉起时会把页面整体上推，导致弹窗内输入框被顶出可视区。核心是监听 visualViewport 动态调整弹窗高度，同时结合弹窗的布局逻辑彻底解决。

下面给你可直接落地的 React 完整实现，完美适配 iOS 键盘弹起 / 收起的交互。

核心原理

iOS 键盘行为：WebView 中键盘弹出会触发 window.visualViewport 变化，visualViewport.height 变小，我们用这个高度差计算可视区。
弹窗布局：弹窗用 fixed 占满屏幕，键盘弹起时动态缩小弹窗剩余高度，让输入框始终在可视区，而非整体上推页面。
避开坑：不使用页面滚动 / 整体上推，而是直接控制弹窗高度，是最稳定的方案。

完整代码实现

1. 组件代码（FullScreenInputPopup.jsx）

import React, { useState, useRef, useCallback, useEffect } from 'react';
import './FullScreenInputPopup.css';const FullScreenInputPopup = ({ visible, onClose, onConfirm }) => {const textareaRef = useRef(null);const popupRef = useRef(null); // 弹窗容器refconst [inputValue, setInputValue] = useState('');const [popupHeight, setPopupHeight] = useState('100vh'); // 弹窗高度，动态调整// 1. 监听 visualViewport 处理键盘弹起/收起useEffect(() => {if (!visible || !window.visualViewport) return;const handleViewportChange = () => {const viewportHeight = window.visualViewport.height;const windowHeight = window.innerHeight;// 键盘弹起时：visualViewport高度 < 窗口高度，计算剩余可用高度if (viewportHeight < windowHeight) {// 弹窗高度 = 键盘弹起后的可视高度 - 头部高度（50px）
        setPopupHeight(`${viewportHeight}px`);} else {// 键盘收起：恢复全屏setPopupHeight('100vh');}};// 监听视觉视口变化window.visualViewport.addEventListener('resize', handleViewportChange);// 初始执行一次，避免初始布局问题
    handleViewportChange();return () => {window.visualViewport?.removeEventListener('resize', handleViewportChange);};}, [visible]);// 聚焦输入框（iOS兼容核心）const focusTextarea = useCallback(() => {if (!textareaRef.current) return;requestAnimationFrame(() => {setTimeout(() => {textareaRef.current.focus();const length = textareaRef.current.value.length;textareaRef.current.setSelectionRange(length, length);}, 20);});}, []);// 弹窗显示后聚焦useEffect(() => {if (visible) {focusTextarea();}}, [visible, focusTextarea]);// 关闭弹窗const handleClose = useCallback(() => {setInputValue('');setPopupHeight('100vh'); // 恢复高度textareaRef.current?.blur();onClose();}, [onClose]);// 确认输入const handleConfirm = useCallback(() => {onConfirm?.(inputValue.trim());handleClose();}, [inputValue, handleClose, onConfirm]);if (!visible) return null;return (<div ref={popupRef}className="fullscreen-popup"style={{ height: popupHeight }} // 动态绑定高度>{/* 弹窗头部 */}<div className="popup-header"><button className="close-btn" onClick={handleClose}>取消</button><span className="title">全屏输入</span><button className="confirm-btn" onClick={handleConfirm}>完成</button></div>
{/* 输入框区域 */}<div className="input-wrapper"><textarearef={textareaRef}className="fullscreen-textarea"value={inputValue}onChange={(e) => setInputValue(e.target.value)}placeholder="请输入内容..."tabIndex="-1"autoFocus/></div></div>
  );
};export default FullScreenInputPopup;

2. 样式代码（FullScreenInputPopup.css）

/* 全屏弹窗容器：fixed定位，禁止display:none */
.fullscreen-popup {position: fixed;top: 0;left: 0;width: 100vw;background: #fff;z-index: 9999;opacity: 1;pointer-events: auto;overflow: hidden;transition: height 0.1s ease; /* 高度过渡更流畅 */
}/* 弹窗头部固定高度 */
.popup-header {display: flex;align-items: center;justify-content: space-between;height: 50px;padding: 0 16px;border-bottom: 1px solid #eee;background: #fff;flex-shrink: 0; /* 禁止收缩 */
}.close-btn, .confirm-btn {font-size: 16px;padding: 6px 12px;border: none;background: transparent;color: #333;cursor: pointer;
}.confirm-btn {color: #007aff;font-weight: 500;
}.title {font-size: 18px;color: #333;font-weight: 500;
}/* 输入框容器：占满剩余高度 */
.input-wrapper {height: calc(100% - 50px);padding: 16px;background: #f5f5f5;box-sizing: border-box;
}/* 全屏textarea */
.fullscreen-textarea {width: 100%;height: 100%;padding: 12px;font-size: 16px;line-height: 1.5;border: none;border-radius: 8px;background: #fff;resize: none;outline: none;-webkit-user-select: text;user-select: text;-webkit-appearance: none;box-sizing: border-box;
}.fullscreen-textarea::placeholder {color: #999;
}

3. 父组件调用（保持不变）

import React, { useState } from 'react';
import FullScreenInputPopup from './FullScreenInputPopup';const App = () => {const [showPopup, setShowPopup] = useState(false);const handleOpenPopup = () => {setShowPopup(true);};const handleConfirm = (value) => {console.log('输入内容：', value);// 业务逻辑
  };const handleClose = () => {setShowPopup(false);};return (<div className="app-container"><button className="open-btn"onClick={handleOpenPopup}>打开全屏输入</button><FullScreenInputPopupvisible={showPopup}onClose={handleClose}onConfirm={handleConfirm}/></div>
  );
};export default App;

关键适配细节（必看）

1. 为什么用 `visualViewport` 而不是 `resize`/`scroll`？

window.visualViewport 是专门为移动端视口设计的 API，能精准获取键盘弹起后的可视区域高度。
相比监听 window.resize，它更精准，不受页面滚动影响，是 iOS 键盘适配的标准方案。

2. 弹窗高度动态调整逻辑

键盘弹起时：visualViewport.height 变小，弹窗高度直接设为该值，头部固定，输入区自适应，完全避开被键盘遮挡。
键盘收起时：恢复 100vh，回到全屏状态。

3. iOS 聚焦兼容兜底

继续保留 requestAnimationFrame + setTimeout(20) 保证用户手势上下文内聚焦。
弹窗不用 display: none，用条件渲染替代（visible 为 false 时返回 null）。

4. App 侧 iOS WebView 额外配置

确保 WKWebView 开启以下配置，避免视口适配异常：

WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
config.preferences.javaScriptEnabled = YES;
config.preferences.allowsInlineTextInsertion = YES;
// 关键：允许视口缩放适配键盘
webView.configuration.preferences.viewportEnabled = YES;
webView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;