uni-app中input的focus属性无反应,因小程序端禁止非用户主动触发的自动聚焦;应使用uni.$nextTick()配合ref调用focus()方法,并按平台差异添加cursor或showSoftInput。

uni-app里input的focus属性为什么没反应
因为focus是布尔属性,但uni-app的input组件不支持直接通过focus="true"或:focus="true"在初始渲染时自动聚焦——它只在值变化时触发一次,且受平台限制(尤其是小程序端)。H5端相对宽松,但微信小程序、支付宝小程序等原生渲染层会拦截非用户主动操作的聚焦行为。
用uni.$nextTick() + focus()方法手动聚焦
这是最稳定、跨端兼容的做法:先确保DOM已挂载,再调用原生focus()方法。注意不能在onLoad里立刻调,得等视图更新完成。
-
ref必须绑定在input上,且命名避免用input(易与原生标签冲突),比如ref="searchInput" - 在
onReady或mounted中调用,onLoad太早,uni.$nextTick必须包裹this.$refs.searchInput?.focus() - 微信小程序需额外加
cursor属性(如:cursor="0")防止光标偏移
// template
<input ref="searchInput" v-model="keyword" :cursor="0" />
// script
export default {
mounted() {
uni.$nextTick(() => {
this.$refs.searchInput?.focus();
});
}
}
小程序平台下focus被拦截的典型错误现象
页面一打开,输入框没反应,控制台无报错,但光标就是不出现。常见于:onLoad里直接this.$refs.xxx.focus()、focus写在v-if切换的节点里、或父级v-show为false时提前获取了ref。
- 微信小程序要求聚焦动作必须由用户手势(tap、click)触发,异步延时(如
setTimeout)也无法绕过 - 如果搜索框在tab页、弹窗或条件渲染块中,务必确认该节点已真实渲染到页面(可用
uni.createSelectorQuery()验证) - H5端可直接用
autofocus原生属性,但小程序不支持,不要混用
需要“点击搜索图标才聚焦”的场景怎么处理
这不是自动聚焦,而是响应式聚焦——此时应去掉所有初始化逻辑,只在事件回调中调用focus(),并配合showSoftInput增强体验。
- 给搜索图标绑定
@click="triggerFocus",方法内调用this.$refs.searchInput?.focus() - 安卓微信小程序有时需补充
uni.showSoftInput({ onlyGetInput: true })来唤起键盘(iOS通常不需要) - 避免重复聚焦:加
v-if="isSearchVisible"控制input显示状态,防止ref为空报错
focus属性声明式写法,老老实实用ref + focus() + nextTick,再根据平台微调,才是稳的。


















