Uniapp踩坑 -- $ref无法使用,如何手动获取input焦点

最新推荐文章于 2025-10-11 15:47:29 发布

原创最新推荐文章于 2025-10-11 15:47:29 发布 · 6.3k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #vue

文章描述了在uniapp开发过程中遇到的表单验证和元素聚焦问题。首先尝试使用$event.target和$refs获取DOM元素并聚焦，但遇到报错。接着发现uniapp内置组件不支持ref属性，document方法在微信小程序中也不适用。最终，作者通过设置数据状态focusState来手动控制输入框的焦点，实现了失去焦点时的错误提示和重新聚焦功能。

起因是做一个表单验证,希望失去焦点的时候,验证输入的正确性,如果输入格式不规范则弹出错误提示并获取焦点,然而却被各种报错折磨了一个小时

首次尝试,使用$event.target获取dom元素

@blur="dataExamine($event.target)"

e.focus()

报错提示

第二次尝试,使用vue的$ref

<input ref="input" @blur="dataExamine()"></input>

this.$refs.input.focus()

依旧报错

网络查询后得知uniapp的ref属性不能用在uniapp的内置组件上面，只能用在自定义组件上面

第三次尝试,使用document.getElementById

相同的报错原因,找不到focus()这个函数

再次查询网络,发现微信小程序无法使用document,只能通过下列形式获取

const query = uni.createSelectorQuery().in(this);
query.select('#id')

然而通过该方法获取dom元素依旧无法使用focus()方法

最后解决,使用uniapp自带的自动获取焦点

经过网络搜索,没有找到什么简单实现的方法,无奈只能把自动变成手动

<input :focus="focusState" @blur="dataExamine()"></input>

data()里

focusState: true,

在失去焦点的时候,将focusState设为false,在需要获取的的时候再设为true

dataExamine() {
		this.focusState = false
		let daysIsNotEmpty = uni.$utils.verification.isNotEmpty(this.banDays)
		let daysIsCorrect = this.banDays !== 0 && 
!/^0/.test(this.banDays) && Number.isInteger(this.banDays)
		if (!daysIsNotEmpty || !daysIsCorrect) {
			this.$nextTick(() => {
				this.focusState = true
			})
		}
}

最终实现获取焦点