Uniapp踩坑input自动获取焦点ref动态获取实例不可用

前言

大家好我是没钱的君子下流坯，用自己的话解释自己的知识。很久很更新了，这几个月一直在加班，今天记录一个uniapp关于input中focus()方法自动获取焦点的坑。

案例

为了实现一个手机验证码的页面，验证码是五个输入框，输入第一个输入框后焦点自动获取到下一个输入框的焦点如图所示：

实现思路

我的思路是给每个输入框动态绑定一个ref实例去调用实例上的focus()方法，我第一次的代码也是这样写的代码如下所示：

<template><view class="container"><view class="otp-container"><inputv-for="(item, index) in otpLength":key="index"type="tel"maxlength="1"@input="onInput($event, index)"@focus="onFocus(index)":ref="`input-${index}`"class="otp-input"/></view><button @click="submitOTP">提交</button></view>
</template><script>
export default {data() {return {otpLength: 5,         // 验证码的长度otpValues: ['', '', '', '', ''],  // 存储每个输入框的值activeIndex: null     // 当前聚焦的输入框索引};},methods: {onInput(event, index) {const value = event.target.value;this.$set(this.otpValues, index, value);  // 更新对应输入框的值if (value && index < this.otpLength - 1) {this.$nextTick(() => {this.focusNextInput(index + 1);  // 自动跳转到下一个输入框});}},onFocus(index) {this.activeIndex = index;  // 记录当前聚焦的输入框索引},focusNextInput(index) {console.log(`Trying to focus input-${index}`);console.log('this.$refs:', this.$refs);const ref = this.$refs[`input-${index}`];if (ref && Array.isArray(ref) && ref.length > 0) {ref[0].focus();  // 确保引用存在再调用 focus 方法} else {console.error(`Reference for input-${index} not found or invalid`, ref);}},submitOTP() {const otp = this.otpValues.join('');  // 将所有输入框的值拼接成一个字符串console.log('提交的验证码:', otp);  // 打印验证码// 这里可以添加提交验证码的逻辑}}
};
</script>

尝试方法1加判断排除DOM渲染

但是一直报错说 "TypeError: this.$refs["input-".concat(...)][0].focus is not a function" 我心想这怎么可能不是个函数难道未定义，我就抓紧打印ref发现是有这个实例的，当时就没多想又对代码进行了检查然后加了判断，考虑可能是没获取到实例或者dom没渲染出来，因为前面的input是通过v-for循环的所以进行了更全面的判断代码如下所示

    focusNextInput(index) {console.log(`Trying to focus input-${index}`);const ref = this.$refs[`input-${index}`];this.$nextTick(() => {// 检查 ref 是否存在if (Array.isArray(ref) && ref.length > 0 && ref[0].focus) {ref[0].focus();  // 如果是数组形式，使用 ref[0] 并调用 focus} else if (ref && ref.focus) {ref.focus();  // 如果直接是 DOM 元素也调用 focus} else {console.error(`Reference for input-${index} not found or invalid`, ref);}});},

尝试方法2查看ref实例用ref上的方法

发现报错还是"TypeError: this.$refs["input-".concat(...)][0].focus is not a function"我就懵逼了。发现不是代码的问题，问题肯定是出现在了ref实例上，我就仔细的看ref实例里面的所有方法如下图所示

发现里没有focus()我想这一次可算找到根本了一次解决直接换成_focus()方法，发现是不报错了但是效果没有，我又换成_onFocus()方法发现也是不报错但是效果没有。到此时为止没有任何思路。

尝试方法3通过uniapp自带获取dom节点

中午吃了饭以后，我想为什么在uniapp中ref实例里面的方法不能用，那我通过uniapp自带的获取dom节点然后通过dom再去控制焦点，说干就干代码如下

    focusNextInput(index) {console.log(`Trying to focus input-${index}`);const ref = this.$refs[`input-${index}`];if (ref && ref.length > 0) {// 使用微信小程序的API来设置焦点console.log(reg,'sssssssssssss')this.$nextTick(() => {uni.createSelectorQuery().in(this).select(`#input-${index}`).fields({ node: true }).exec((res) => {res[0].node._onFocus();  // 使用 focus 方法设置焦点});});} else {console.error(`Reference for input-${index} not found or invalid`, ref);}},

我把这段代码修改后发现使用focus()还不行_focus()方法_onFocus()方法也不行

解决办法

上面我是所能用的方法都用了，这时候我想着看看官网吧，发现uniapp有自带的获取焦点的方法，只有用官网的方法才可以也就是<input :focus="focusState" @blur="dataExamine()"></input>这种，我心想那直接控制:focus实现代码如下所示：

<template><view class="container"><view class="otp-container"><inputv-for="(item, index) in otpLength":key="index"type="tel"v-model="otpValues[index]":focus="activeIndex === index"maxlength="1"@input="onInput($event, index)"@focus="onFocus(index)":ref="`input-${index}`":id="`input-${index}`"class="otp-input"/></view><button @click="submitOTP">提交</button></view>
</template><script>
export default {data() {return {otpLength: 5,          // 验证码的长度otpValues: ['', '', '', '', ''], // 存储每个输入框的值activeIndex: null      // 当前聚焦的输入框索引};},mounted() {// 页面加载完成时绑定 refsthis.$nextTick(() => {console.log('Initial refs:', this.$refs);});},methods: {onInput(event, index) {const value = event.target.value;console.log(event, index, value,'1111111111111111111111111');this.$set(this.otpValues, index, value);  // 更新对应输入框的值if (value && index < this.otpLength - 1) {this.$nextTick(() => {this.focusNextInput(index + 1);  // 自动跳转到下一个输入框});}},onFocus(index) {this.activeIndex = index;  // 记录当前聚焦的输入框索引console.log(this.activeIndex);},focusNextInput(index) {console.log(`Trying to focus input-${index}`);this.activeIndex = index;  // 设置指定输入框为焦点},submitOTP() {const otp = this.otpValues.join('');  // 将所有输入框的值拼接成一个字符串console.log('提交的验证码:', otp);  // 打印验证码// 这里可以添加提交验证码的逻辑}}
};
</script>

到此这个效果算是完成了，uniapp中有很多细节和vue上有偏差，还是需要熟读文档。还是那句话代码代码千千万，适合自己最重要。