1. 移动端 input 聚焦后键盘贴太近，问题到底出在哪

在移动端 H5 或小程序里做聊天输入框、评论框、表单底部输入项时，很多人会遇到同一个现象：手指点一下input，软键盘从底部弹起来，输入框确实被顶上去了，但输入框的下边缘几乎贴着键盘顶部，视觉上非常挤，光标和键盘之间没有呼吸感。如果输入框下面还有发送按钮、字数提示或者安全区留白，这一挤就容易出现半遮挡、误触、甚至光标被键盘盖住一两个像素的情况。

这个问题的核心不是键盘弹起逻辑坏了，而是输入框和键盘之间缺少一段“缓冲距离”。在微信小程序体系里，input组件提供了一个专门控制这段距离的属性：cursorSpacing。它的作用就是指定光标与键盘之间的距离，单位是px。你写cursorSpacing='20'，输入框聚焦后距离键盘顶部就会留出 20px 的间距。听起来很简单，但实际项目里它经常被忽略，或者写了没生效，原因往往出在单位、平台差异、页面滚动模式、以及和adjust-position的配合上。

这篇内容面向正在做移动端输入交互的开发者，尤其是用 uni-app、原生小程序、Taro 写聊天或评论场景的同学。我会把cursorSpacing的配置、样式骨架、真机验证动作和常见报错排查串起来，让你拿到就能改，改完能在真机上看到预期表现。需要说明的是，cursorSpacing属于小程序input/textarea组件的原生属性，H5 端并不完全等价，H5 更多依赖visualViewport或scrollIntoView自己算，所以下面会区分平台讲。

先给结论：如果你在小程序里遇到“键盘距离输入框底部太近”，第一优先级就是给input或textarea加上cursor-spacing（原生小程序）或cursorSpacing（uni-app 模板里常见写法），值从 20 到 40 之间调，再配合adjust-position和底部安全区，基本能解决 90% 的贴边问题。剩下的 10% 是页面结构导致的，比如输入框被放在position: fixed容器里、或者外层有transform，这些会影响键盘顶起时的计算基准。

2. 用 TaoToken 快速拿到可运行的模型对话与代码补全环境

在动手改cursorSpacing之前，先解决一个现实问题：很多同学调移动端输入交互时，手边没有一个能随时问、随时补全代码的环境，遇到cursorSpacing不生效只能靠猜。我自己的做法是先把 TaoToken 的模型对话和 API Key 配好，遇到组件属性不确定、平台差异记不清的时候直接问，省去反复翻文档的时间。

TaoToken 官网入口是 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，API 地址是 https://taotoken.net/api ，注意 API 地址后面不加 UTM 参数。它的定位是给开发者提供大模型调用能力，适合用来做代码问答、组件属性确认、报错解释这类日常开发辅助。你不需要把它当成编辑器替代品，它更像一个随叫随到的技术顾问。

具体操作上，先到控制台创建 API Key，控制台地址是 https://taotoken.net/console?utm_source=taotoken_aicg_blog_end&utm_content=console&utm_campaign=rewrite ，在 API Keys 页面生成密钥，地址是 https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api-keys&utm_campaign=rewrite 。拿到 Key 之后，如果你想先在网页里验证模型能不能正常回答小程序组件问题，可以直接用模型对话页面，地址是 https://taotoken.net/chat?utm_source=taotoken_aicg_blog_end&utm_content=model-chat&utm_campaign=rewrite ，输入“小程序 input cursorSpacing 不生效的原因”这类问题，看它给的排查方向是否靠谱。

如果你长期要写移动端代码、做 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=claudecode&utm_campaign=rewrite ，用命令行写代码的同学可以看这个。

这一步不是必须的，但配好之后，后面排查cursorSpacing的平台差异会快很多。下面进入正题。

3. cursorSpacing 的可复制配置与样式骨架

3.1 原生小程序里的写法

原生微信小程序中，input和textarea都支持cursor-spacing属性，注意是短横线命名。最小可用代码如下：

<input type="text" value="{{replyMain}}" cursor-spacing="20" adjust-position="{{true}}" bindinput="onInput" placeholder="说点什么" />

这里cursor-spacing="20"表示光标与键盘之间保留 20px。adjust-position默认为true，表示键盘弹起时页面自动上推，让输入框可见。两者配合才是完整效果：adjust-position负责把输入框顶上来，cursor-spacing负责顶上来之后留多少空隙。

如果你用的是textarea，写法一样：

<textarea value="{{content}}" cursor-spacing="30" adjust-position="{{true}}" bindinput="onInput" placeholder="输入评论" />

3.2 uni-app 模板里的写法

uni-app 编译到小程序时，属性名通常写成驼峰cursorSpacing，这也是很多示例里的写法：

<input cursorSpacing="20" type="text" v-model="replyMain" :adjust-position="true" placeholder="说点什么" />

注意cursorSpacing的值建议用字符串或数字都行，但不要写成cursorSpacing="20px"，因为它的单位固定是 px，你再加px反而可能被解析成非法值导致不生效。这一点我在真机上踩过，写成20px后间距完全没变化，改回20就正常了。

3.3 底部输入栏的样式骨架

光有cursorSpacing还不够，输入框所在容器的定位方式会直接影响键盘顶起的效果。推荐用position: fixed固定在底部，并留出安全区：

.input-bar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; align-items: center; padding: 8px 12px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #eee; z-index: 100; } .input-bar input { flex: 1; height: 36px; line-height: 36px; padding: 0 12px; border-radius: 18px; background: #f5f5f5; font-size: 14px; } .input-bar .send-btn { margin-left: 8px; padding: 0 16px; height: 36px; line-height: 36px; border-radius: 18px; background: #07c160; color: #fff; font-size: 14px; }

对应的结构：

<view class="input-bar"> <input cursorSpacing="20" type="text" v-model="replyMain" :adjust-position="true" placeholder="说点什么" /> <view class="send-btn" @tap="onSend">发送</view> </view>

这里有个关键点：cursorSpacing控制的是光标与键盘的距离，而padding-bottom里的安全区控制的是输入栏与屏幕底部的距离。两者作用不同，不要混用。安全区是为了避开 iPhone 底部横条，cursorSpacing是为了避开键盘顶部。

3.4 参数对照表

注意：cursorSpacing只在输入框聚焦、键盘弹起时生效。如果你在真机上点了输入框但键盘没弹（比如用了模拟器），是看不到间距变化的，必须用真机预览。

4. 真机验证请求与预期表现

配置写完，怎么确认它真的生效？我一般按下面这套动作走，每一步都有明确的预期表现。

第一步，用微信开发者工具打开项目，点击“预览”，用手机扫码。不要用模拟器判断键盘间距，模拟器的键盘是假的，cursorSpacing不会体现。

第二步，进入带输入框的页面，点击输入框。预期表现：软键盘从底部弹起，输入框被顶到键盘上方，输入框下边缘与键盘顶部之间有一段明显空隙，大约就是你设置的 20px 对应的视觉距离。如果输入框紧贴键盘，说明cursorSpacing没生效。

第三步，把cursorSpacing从 20 改成 40，重新预览，再点输入框。预期表现：空隙明显变大。这一步是确认属性真的被读取了，而不是碰巧布局看起来还行。

第四步，测试textarea多行输入。预期表现：多行输入框聚焦后，光标所在行与键盘之间同样保留间距，不会因为行数变多而贴边。

第五步，测试底部安全区机型，比如带横条的 iPhone。预期表现：输入栏本身距离屏幕底部有安全区留白，同时输入框与键盘之间还有cursorSpacing的间距，两层距离叠加，视觉上不挤。

如果你在 H5 端做，cursorSpacing不适用，需要用visualViewport监听键盘高度，动态给输入栏加bottom值。示例：

if (window.visualViewport) { window.visualViewport.addEventListener('resize', () => { const keyboardHeight = window.innerHeight - window.visualViewport.height; document.querySelector('.input-bar').style.bottom = keyboardHeight + 'px'; }); }

H5 的预期表现是：键盘弹起后输入栏上移到键盘上方，你可以额外加 20px 的margin-bottom来模拟cursorSpacing的呼吸感。

5. 本篇常见错排查

5.1 cursorSpacing 写了没反应

最常见的原因是单位写错。cursorSpacing="20px"不生效，改成cursorSpacing="20"。其次是平台写错，H5 端不支持这个属性，你写了也白写。第三是用了模拟器，模拟器不弹真键盘，看不到效果。

5.2 输入框被键盘遮挡

如果adjust-position设成了false，页面不会自动上推，输入框就可能被键盘盖住。把它设回true。如果设了true还是遮挡，检查输入框外层是不是有position: fixed且bottom写死，固定定位的元素在键盘弹起时不一定跟着上推，需要手动监听键盘高度调整。

5.3 间距忽大忽小

不同机型键盘高度不同，cursorSpacing是固定 px，所以视觉上会有差异。这是正常的。如果你要更精细的控制，可以结合bindkeyboardheightchange事件动态调整，但大多数场景固定 20–30 就够了。

5.4 输入框顶起后页面跳动

页面跳动通常是因为adjust-position上推时和页面自身滚动冲突。可以给页面设置scroll-top手动控制，或者在输入框聚焦时先记录滚动位置，失焦后恢复。

5.5 textarea 在 iOS 上光标位置异常

iOS 的textarea在键盘弹起后光标可能跑到可视区外，这时候cursorSpacing要配合adjust-position一起用，并且给textarea设置auto-height或固定高度，避免高度计算错乱。

提示：排查时优先用真机 + 真键盘，模拟器和假键盘会浪费你大量时间。

6. 把配置落到你的项目里

回到最开始的问题：input 调起键盘后距离太近，本质是缺少光标与键盘之间的缓冲。cursorSpacing就是那个缓冲开关，小程序里写cursor-spacing="20"或cursorSpacing="20"，配合adjust-position和底部安全区，就能让输入框和键盘之间留出舒服的距离。H5 端则用visualViewport自己算键盘高度，再补一段 margin。

如果你在接入或排查过程中需要快速确认某个平台属性、或者想让模型帮你解释一段键盘高度监听的代码，可以用 TaoToken 的模型对话页面直接问，地址是 https://taotoken.net/chat?utm_source=taotoken_aicg_blog_end&utm_content=model-chat&utm_campaign=rewrite 。需要长期写移动端代码、做 Agent 的同学，可以看 Coding Plan，地址是 https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding-plan&utm_campaign=rewrite 。API Key 在 https://taotoken.net/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 。

最后留一个我自己的习惯：每次改完cursorSpacing，一定用两台不同尺寸的真机各点一次输入框，一台小屏一台大屏，确认间距在两端都不贴边。这个动作花不了两分钟，但能帮你避开上线后被用户反馈“键盘顶太近”的尴尬。