1. 软键盘顶起输入框问题到底出在哪Uniapp 编译到 h5 之后移动端软键盘弹起把输入框顶飞、或者输入框被键盘遮住一半这个场景我遇到过太多次。表现通常是页面底部有个输入框手指点上去键盘从底部升起结果输入框要么被推到屏幕外要么被键盘盖住用户根本看不到自己输入的内容。更麻烦的是键盘收起后页面布局没有回弹留出一大块空白滚动条位置也乱了。这个问题的本质是h5 页面在移动端浏览器里软键盘弹起会改变可视区域高度visualViewport但页面布局并不会自动跟着调整。Uniapp 的 input 组件在 h5 端底层还是原生的 input 元素键盘弹起时浏览器默认行为是滚动页面让焦点元素可见但这个滚动行为在不同机型、不同浏览器内核上表现不一致所以才会出现「有的机型正常、有的机型顶飞」的情况。适合谁看正在用 Uniapp 做 h5 移动端页面、被软键盘遮挡输入框困扰的前端同学。这篇会从页面布局和键盘高度监听两个角度切入给出可复制的配置骨架同时把 TaoToken 统一 Key 的接入方式一起讲清楚——因为很多同学在调这个问题的同时还在对接大模型接口两件事可以一起搞定。核心检索词先明确Uniapp h5 输入框软键盘顶起、softinputMode adjustResize、cursor-spacing、visualViewport 监听。这几个词你搜到的方案大多只讲一半下面我把完整链路补全。2. TaoToken 统一 Key 前置准备在动手改布局之前先把接口调用的 Key 体系理顺。TaoToken 是一个统一的大模型 API 接入层你只需要一个 Key就能调用多家模型不用为每个模型单独申请、单独管理。对于 Uniapp h5 这种前端项目来说把 Key 统一管理能省掉很多切换成本。官网地址https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentAPI 地址https://taotoken.net/api你需要先去控制台创建一个 API Key然后把它配置到项目里。注意h5 前端直接暴露 Key 是有风险的生产环境建议走自己的后端转发这里为了演示接入流程先用配置文件的方式管理。创建 Key 的入口在控制台的 API Keys 页面https://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite如果你只是想先验证模型能不能通可以用模型对话页面直接测试https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodelsutm_campaignrewrite长期做编码或者 Agent 类项目的可以看 Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite接入文档在这里https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewriteClaude Code 相关的接入说明https://taotoken.net/claude-code-anthropic?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_codeutm_campaignrewrite拿到 Key 之后我们把它写进项目的 config.toml 骨架里。下面这个骨架同时兼顾了软键盘配置和接口配置你可以直接复制。3. 可复制的 config.toml 配置骨架先说明一下Uniapp 项目本身用的是 pages.json 和 manifest.json但很多团队会用 config.toml 做统一配置管理再通过脚本生成或注入。下面这个骨架把软键盘相关配置和 TaoToken 接入配置放在一起结构清晰方便维护。# config.toml - Uniapp h5 项目统一配置骨架 [app] name uniapp-h5-demo platform h5 # 软键盘与输入框相关配置 [app.softinput] # 键盘弹起时页面调整模式h5 端配合 CSS 使用 mode adjustResize # 输入框与键盘的间距单位 px cursor_spacing 10 # 是否监听 visualViewport 变化 watch_visual_viewport true # 键盘弹起后延迟滚动时间单位 ms scroll_delay 100 # TaoToken 统一 Key 接入配置 [taotoken] base_url https://taotoken.net/api api_key sk-你的Key填这里 default_model gpt-4o-mini timeout 30000 [taotoken.headers] Content-Type application/json Authorization Bearer ${TAOTOKEN_API_KEY}对应的 pages.json 里页面模块要加上 softinputMode 配置{ path: pages/chat/index, style: { app-plus: { titleNView: false, softinputMode: adjustResize }, enablePullDownRefresh: false } }input 组件本身要加 cursor-spacing 和 classinput classuni-input cursor-spacing10 v-modelinputValue placeholder请输入内容 focusonInputFocus bluronInputBlur /CSS 层面页面容器要允许滚动并且给底部留出安全距离.page-container { min-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } .input-wrapper { position: fixed; bottom: 0; left: 0; right: 0; padding-bottom: env(safe-area-inset-bottom); background: #fff; z-index: 100; }这套配置的核心逻辑是softinputMode 设为 adjustResize 让页面在键盘弹起时重新计算高度cursor-spacing 保证输入框和键盘之间有间距visualViewport 监听用来处理那些 adjustResize 不生效的机型。4. 键盘高度监听与验证请求配置写完之后还需要在 JS 里监听键盘高度变化动态调整输入框位置。h5 端可以用 window.visualViewport 来实现export default { data() { return { inputValue: , keyboardHeight: 0 } }, mounted() { if (window.visualViewport) { window.visualViewport.addEventListener(resize, this.handleViewportResize) window.visualViewport.addEventListener(scroll, this.handleViewportResize) } }, beforeDestroy() { if (window.visualViewport) { window.visualViewport.removeEventListener(resize, this.handleViewportResize) window.visualViewport.removeEventListener(scroll, this.handleViewportResize) } }, methods: { handleViewportResize() { const viewport window.visualViewport const windowHeight window.innerHeight const viewportHeight viewport.height const offsetTop viewport.offsetTop this.keyboardHeight windowHeight - viewportHeight - offsetTop this.adjustInputPosition() }, adjustInputPosition() { const wrapper document.querySelector(.input-wrapper) if (!wrapper) return if (this.keyboardHeight 0) { wrapper.style.transform translateY(-${this.keyboardHeight}px) } else { wrapper.style.transform translateY(0) } }, onInputFocus() { setTimeout(() { this.handleViewportResize() }, 300) }, onInputBlur() { this.keyboardHeight 0 this.adjustInputPosition() } } }接下来验证 TaoToken 接口是否通。在同一个页面里加一个测试方法async testTaoToken() { try { const res await uni.request({ url: https://taotoken.net/api/v1/chat/completions, method: POST, header: { Content-Type: application/json, Authorization: Bearer sk-你的Key }, data: { model: gpt-4o-mini, messages: [ { role: user, content: 你好测试一下连接 } ] } }) console.log(TaoToken 响应:, res.data) } catch (e) { console.error(请求失败:, e) } }真机验证软键盘修复效果时重点检查这几个动作点击输入框后键盘弹起输入框是否完整可见键盘收起后页面是否回弹到原位在输入框和键盘之间是否有 10px 左右的间距快速切换输入框时布局是否抖动。我实测下来visualViewport 监听加上 adjustResize 组合在主流机型上基本能覆盖。5. 本篇常见错排查第一个坑softinputMode 配了但没生效。检查 pages.json 里配置的位置对不对必须在对应页面的 style 下而且 h5 端部分机型不认这个配置所以必须配合 visualViewport 监听兜底。第二个坑cursor-spacing 设了但输入框还是贴键盘。这个属性在 h5 端表现不稳定建议用 CSS 的 padding-bottom 或者 transform 来补间距不要完全依赖它。第三个坑visualViewport 监听导致页面抖动。原因是 resize 和 scroll 事件触发太频繁加个防抖handleViewportResize() { clearTimeout(this._resizeTimer) this._resizeTimer setTimeout(() { // 实际处理逻辑 }, 50) }第四个坑TaoToken 请求返回 401。检查 Authorization 头是不是 Bearer 加空格加 KeyKey 有没有复制完整有没有多余换行。如果还是不行去控制台重新生成一个 Key 试试。第五个坑h5 端跨域。uni.request 在 h5 端受浏览器同源策略限制如果 TaoToken 接口没有开 CORS需要在 manifest.json 里配置代理或者走自己的后端转发。第六个坑键盘收起后页面留白。这是 adjustResize 模式下页面高度没有恢复导致的在 blur 事件里手动重置 transform 和滚动位置。6. 接入与排障的下一步软键盘顶起这个问题核心就是「配置 监听 兜底」三层。config.toml 骨架把配置集中管理visualViewport 监听处理动态高度CSS 保证布局不崩。TaoToken 的 Key 接入和这个流程可以并行做统一 Key 的好处是你不用在多个模型平台之间来回切换。如果你在接入过程中遇到 Key 相关的问题直接去 API Keys 页面检查https://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite接口调用的细节看文档https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite想先跑通模型对话验证 Key 是否可用https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodelsutm_campaignrewrite长期做编码类项目的同学Coding Plan 会更省心https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite最后提醒一句h5 端直接暴露 Key 只适合本地调试上线前一定要把请求转到自己的后端前端只传业务参数。软键盘的修复方案也一样不同机型多测几遍把 visualViewport 监听的防抖时间调到 50ms 左右基本就不会抖了。