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_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=
API 地址：https://taotoken.net/api
你需要先去控制台创建一个 API Key，然后把它配置到项目里。注意：h5 前端直接暴露 Key 是有风险的，生产环境建议走自己的后端转发，这里为了演示接入流程，先用配置文件的方式管理。
创建 Key 的入口在控制台的 API Keys 页面：https://taotoken.net/console/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api_keys&utm_campaign=rewrite
如果你只是想先验证模型能不能通，可以用模型对话页面直接测试：https://taotoken.net/models?utm_source=taotoken_aicg_blog_end&utm_content=models&utm_campaign=rewrite
长期做编码或者 Agent 类项目的，可以看 Coding Plan：https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding_plan&utm_campaign=rewrite
接入文档在这里：https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite
Claude Code 相关的接入说明：https://taotoken.net/claude-code-anthropic?utm_source=taotoken_aicg_blog_end&utm_content=claude_code&utm_campaign=rewrite
拿到 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 和 class：
<input class="uni-input" cursor-spacing="10" v-model="inputValue" placeholder="请输入内容" @focus="onInputFocus" @blur="onInputBlur" />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 加空格加 Key，Key 有没有复制完整，有没有多余换行。如果还是不行，去控制台重新生成一个 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_source=taotoken_aicg_blog_end&utm_content=api_keys&utm_campaign=rewrite
接口调用的细节看文档：https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite
想先跑通模型对话验证 Key 是否可用：https://taotoken.net/models?utm_source=taotoken_aicg_blog_end&utm_content=models&utm_campaign=rewrite
长期做编码类项目的同学，Coding Plan 会更省心：https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding_plan&utm_campaign=rewrite
最后提醒一句：h5 端直接暴露 Key 只适合本地调试，上线前一定要把请求转到自己的后端，前端只传业务参数。软键盘的修复方案也一样，不同机型多测几遍，把 visualViewport 监听的防抖时间调到 50ms 左右，基本就不会抖了。
