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

前言

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

案例

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

实现思路

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

<template>
  <view class="container">
    <view class="otp-container">
      <input
        v-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">
      <input
        v-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() {
    // 页面加载完成时绑定 refs
    this.$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上有偏差，还是需要熟读文档。还是那句话代码代码千千万，适合自己最重要。

原文地址：https://blog.csdn.net/m0_45884629/article/details/143769815

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！