vue中光标自动显示到指定的input框内

1、给input加上ref;

<v-otp-input
   ref="inputName"
   class="opt-input"
   length="9"
   type="number"
   pattern="\d*"
   v-model="payNum"
   plain
  ></v-otp-input>

2、一进来就执行放在mounted里；

 mounted(){
    this.$nextTick(() => {
      this.$refs.inputName.focus();
    })
  },

3、如果想在执行事件之后让光标显示到input框内就加在事件中

testFun() {
    this.$nextTick(() => {
        this.$refs.inputName.focus();
    })
}

 4、另一种定位到头部的定法

     this.$nextTick(() => {
          // this.$refs.inputName.focus();
          const inputElement = this.$refs.inputName.$el.querySelector('input');
          // 设置光标位置
          inputElement.setSelectionRange(this.cursorPosition, this.cursorPosition);
          // 聚焦输入框
          inputElement.focus();
        })

 

5、同第4种一样，只不过定位到尾部

this.$nextTick(() => {    
   const inputElement=this.$refs.inputName.$el.querySelector('input');
   const length = inputElement.value.length;
   if (inputElement) {
     inputElement.setSelectionRange(length, length);
     inputElement.focus();
    }
})

 

参考文档

https://www.cnblogs.com/clark1990/p/16498108.html