在做微信小程序开发时，我们经常会遇到各种「平台差异化」问题。最近我就踩到一个很奇怪的坑：
👉 在 iOS 微信环境下，表单 <Input /> 输入时会被 Safari 自动填充触发，结果导致键盘一闪而过，严重影响用户体验。
这篇文章记录一下我排查和解决的过程，希望能帮到同样踩坑的同学。
1️⃣ 问题现象
我有一个典型的 登录表单：
- 输入 用户名
- 输入 密码
- 输入 6 位数字验证码
在 Android 和 H5 里都没问题，但在 iOS 微信小程序上出现了异常：
- 点进输入框，键盘会自动弹出又立刻收起；
- 明明代码没问题，却无法正常输入；
- 打印日志发现 微信内核触发了自动填充，而不是用户主动输入。
2️⃣ 为什么会这样？
原因其实出在 iOS 的输入法机制：
- iOS 的 Safari/WebKit 内核会自动尝试「自动填充」账号和密码；
- 即使小程序
Input组件没有声明autoComplete，微信内部也会偷偷加上属性； - 一旦触发自动填充，输入框会被「写值」并立刻失焦，导致键盘收起。
👉 所以这是 系统行为 + 微信小程序内核 bug，开发者很难直接关闭。
3️⃣ 常见但无效的尝试
我最开始尝试了几个方向：
- 设置
autoComplete="off"、autocomplete="new-password"❌ → 小程序不支持这些属性； - 用 JS 阻止自动填充事件 ❌ → 在小程序里无法拦截；
- 用延迟聚焦
setTimeout(() => input.focus())❌ → 依旧会被系统覆盖。
最终都没法解决。
4️⃣ 我的解决方案：两个隐藏输入框
既然系统会「盯上第一个输入框」进行自动填充，那我就干脆放一个 隐藏的输入框，把系统骗过去。
具体实现思路：
- 在真正表单的前后，插入两个不可见的
<input>； - 这些隐藏输入框用极小的宽高，放在
overflow: hidden容器里，不影响布局； - iOS 自动填充会优先作用在这两个隐藏输入框上，而不会干扰真正的用户名/密码输入框。
5️⃣ 代码示例（Taro 版本）
<View className='login-form'>
{/* 前置隐藏输入框，用来吸收自动填充 */}
<view style={{ width: '1rpx', height: '1rpx', overflow: 'hidden' }}>
<input></input>
</view>
<View className='input-group'>
<Text className='label'>用户名</Text>
<Input
className='input-item'
placeholder='请输入用户名'
value={form.username}
type='text'
onInput={e => handleInput('username', e.detail.value)}
/>
</View>
{/* 后置隐藏输入框 */}
<view style={{ width: '1rpx', height: '1rpx', overflow: 'hidden' }}>
<input></input>
</view>
<View className='input-group'>
<Text className='label'>密码</Text>
<Input
className='input-item'
placeholder='请输入密码'
password
value={form.password}
onInput={e => handleInput('password', e.detail.value)}
/>
</View>
<View className='input-group'>
<Text className='label'>验证码</Text>
<Input
className='input-item'
placeholder='请输入验证码'
maxlength={6}
value={form.code}
onInput={e => handleInput('code', e.detail.value)}
/>
</View>
</View>
效果：
- iOS 微信环境下，键盘不再自动收起；
- Android / H5 不受影响；
- 用户输入体验正常。
6️⃣ 总结
- iOS 微信小程序
<Input />被自动填充劫持，是个系统级问题； - 官方暂时没提供关闭自动填充的 API；
- 在表单前后放置隐藏输入框，能有效绕过自动填充，保证输入体验；
- 这种做法在不少前端社区里也被称为「假输入框转移法」。
7️⃣ 一句话心得
有时候，和系统机制硬刚是没用的，换个思路「借力打力」反而更简单。
👨💻 以上就是我在 Taro + 微信小程序开发中遇到的 iOS 自动填充坑的解决方案，如果你也遇到过类似问题，欢迎在评论区分享你的经验！
