uni-app 中 input 的 focus 属性跨平台行为不一致:h5 必须用 ref + focus() 方法,小程序虽支持 focus 属性但需组件已渲染且避免 v-if 隐藏;推荐统一使用 $nexttick + ref.focus() 确保可靠聚焦。

uni-app 中 input 的 focus 属性为什么没反应
因为 focus 是布尔属性,但 uni-app 的 input 组件在 H5 和小程序平台行为不一致:H5 上仅靠 focus="true" 不会自动聚焦,必须配合 ref + focus() 方法;小程序(微信/支付宝等)虽支持 focus 属性,但首次渲染时若组件未挂载完成或被条件隐藏(v-if),也会失效。
常见错误现象:focus="true" 写了但光标没出现、页面跳转后输入框没聚焦、iOS 微信里点一次才聚焦。
- 用
v-if控制显示时,确保组件已渲染完成再触发聚焦(可用$nextTick) - 不要在
onLoad里直接调this.$refs.inputRef.focus(),此时 DOM 可能还没就绪 - H5 平台必须手动调用方法,
focus属性无效
正确写法:用 ref + focus() 主动控制
这是跨平台最可靠的方式。给 input 加 ref,在生命周期中调用原生 focus 方法。
示例:
<input ref="myInput" v-model="value">
在 onReady 或 $nextTick 后调用:
onReady() {
this.$nextTick(() => {
const input = this.$refs.myInput;
if (input && typeof input.focus === 'function') {
input.focus();
}
});
}
-
onReady比onLoad更稳妥,确保视图已初始化 - 加
typeof input.focus === 'function'判断,避免 H5 下 ref 返回 undefined 或非 DOM 节点 - App 端需注意:iOS 原生输入法弹出有延迟,可加
setTimeout微调(但慎用)
小程序平台可以简化:用 focus 属性 + v-show
微信/支付宝小程序支持 focus 属性,但前提是组件已渲染且未被 v-if 移除。如果只是显隐切换,优先用 v-show。
<input v-show="showInput" :focus="showInput" v-model="value">
-
:focus="showInput"是响应式绑定,showInput 变为 true 时会尝试聚焦 - 避免
v-if="showInput",否则每次 showInput 变 true 都是新组件,focus 属性只在首次生效 - 支付宝小程序对
focus支持更严格,建议仍配合$nextTick保险
聚焦失败的调试线索
当光标没出现,先检查这几个点:
- 控制台是否报错
Cannot read property 'focus' of undefined?说明ref没拿到元素,确认模板中ref拼写和生命周期时机 - 页面是否有
position: fixed或transform容器?某些安卓 WebView 下会导致 focus 失效 - 输入框是否被
disabled或readonly?这两个属性会让focus()静默失败 - App 端开启软键盘失败时,部分 Android 机型需要手动触发一次点击事件模拟,但属于边缘 case,不建议作为常规方案
真正难处理的是多层嵌套、动态表单、Tab 切换后聚焦——这些场景下 ref 获取和时机判断必须更精细,别依赖“写上 focus 就行”。











