禁用uni-app页面自动聚焦需移除:focus="true"、autofocus及onload/onshow中聚焦逻辑,h5端可加key强制重渲染,android端避免:focus循环修改,小程序input不支持adjust-position。

uni-app 页面加载时 input 自动聚焦怎么禁用
页面一打开就弹键盘,不是用户主动点的,这通常是因为 input 绑定了 :focus="true"、写了 autofocus 属性,或在 onLoad/onShow 里误调了聚焦逻辑。H5、App、小程序三端表现不一致,但根因基本逃不出这几种。
- 检查模板中是否写了
:focus="true"或focus(未绑定变量却写死为 true),直接删掉或改为:focus="false" - 确认没加原生
autofocus属性——uni-app 不支持该 HTML 属性,写了也无效,还可能干扰编译 - 排查
onLoad或onShow中是否调用了this.$nextTick(() => { this.isFocused = true })类似代码,尤其注意从其他页面返回时的“状态残留” - H5 端若仍自动聚焦,可能是浏览器缓存了上次输入焦点位置,可加
key强制重渲染:比如<input :key="inputKey">,并在onLoad里重置inputKey
为什么 onShow 里用 setTimeout 隐藏键盘还是弹出来了
因为 setTimeout 只是延后执行,而焦点已在页面显示前就已触发。更可靠的做法是「先阻止,再恢复」:不在生命周期里主动设 focus,而是等用户真实交互后再控制。
- 把
:focus绑定到一个明确由用户动作触发的变量上,比如:focus="shouldFocus",初始值为false - 只在按钮点击、图标 tap 等明确意图下才设
shouldFocus = true,避免生命周期钩子“替用户做决定” - 如果必须在页面显示后自动聚焦(如扫码页),改用
onReady+$nextTick,比onShow更稳妥;onShow在页面栈切换时可能被多次触发 - 慎用
uni.hideKeyboard()主动收键盘——它不能阻止聚焦,只能收已弹出的键盘,且在某些 Android Webview 下有延迟或失败
Android App 端 input 频繁聚焦/失焦抖动怎么压住
这不是样式问题,是 native 层焦点管理失控。典型现象:点一下空白区域,input 在 focus/blur 间疯狂切换,键盘反复弹落。根本原因是 :focus 值被快速来回修改,触发了底层控件的异常响应。
- 禁止在
@focus和@blur回调里直接修改focus绑定的变量,否则形成循环:聚焦 → 触发 @focus → 设 focus=true → 再次聚焦…… - 改用受控模式:只通过用户操作(如按钮)设置
focus,@focus/@blur仅用于记录状态或收键盘,不反向驱动:focus - 给
input加catch:focus和catch:blur(小程序端)或统一用@touchstart.prevent拦截非必要触摸事件,减少误触发 - Android App 端若仍不稳定,临时方案:用
disabled+readonly替代禁用聚焦,配合自定义软键盘组件绕过原生控件
小程序平台 adjust-position="false" 为什么没用
adjust-position 是 textarea 和部分原生组件的属性,input 根本不支持。而且这个属性只在微信/支付宝小程序生效,H5 完全忽略——写了等于白写,还会误导你排查方向。
- 别在
input上写adjust-position,它只对textarea有效 - 想让 input 不被键盘顶起,得靠容器定位 + 动态 bottom:监听
@focus拿到e.detail.height,设父容器bottom: height + 'px',@blur时还原 - 微信小程序中
input的 focus 样式由 native 渲染,CSS 伪类:focus失效,必须用class切换 +focused数据驱动 - 真要彻底禁用默认聚焦行为,最干净的方式是:不用
input,改用uni-easyinput或自定义组件封装,把焦点控制权完全收归 JS 层
真正麻烦的从来不是“怎么去掉”,而是“为什么去掉之后又冒出来”——多数问题都藏在跨端生命周期差异和状态同步时机里。盯住 :focus 的源头,比堆 CSS 或定时器更治本。











