Vue3中vue-tel-input编辑手机号时光标跳至末尾问题求助

问题描述 #

在Vue3项目中使用vue-tel-input组件时，编辑手机号时光标会自动跳至输入框末尾，导致中间编辑操作困难。注：该问题仅在非Firefox浏览器中出现。

复现步骤 #

• 访问组件官方演示页面
• 在输入框中输入任意手机号
• 点击“Show Options”链接
• 取消勾选“autoFormat”复选框
• 尝试从手机号中间位置编辑内容，光标会立即跳至末尾

示例代码 #

<template>
  <vue-tel-input v-model="phone" mode="international"></vue-tel-input>
</template>
<script>
import { ref } from 'vue';
import { VueTelInput } from 'vue-tel-input';
import 'vue-tel-input/vue-tel-input.css';

export default {
  components: {
    VueTelInput,
  },
  setup() {
    const phone = ref(null);
    return {
      phone,
    };
  },
};
</script>

已尝试的无效解决方案 #

方案一 #

// 获取当前光标位置
const input = this.$refs.phoneRef.$refs.input;
const cursorPosition = input.selectionStart;

// 更新手机号后还原光标位置
this.$nextTick(() => {
  input.setSelectionRange(cursorPosition, cursorPosition);
});

方案二 #

data() {
  return {
    phone: "", // 初始手机号
    cursorPosition: 0,
  };
},
methods: {
  onPhoneInput(newValue) {
    const input = this.$refs.phoneRef.$refs.input;
    // 计算光标位置变化量
    const cursorChange = newValue.length - this.phone.length;
    // 更新手机号
    this.phone = newValue;
    // 计算新光标位置
    this.cursorPosition += cursorChange;
    // 确保光标在输入框合法范围内
    this.cursorPosition = Math.max(0, Math.min(this.cursorPosition, this.phone.length));
    // 还原光标位置
    this.$nextTick(() => {
      input.setSelectionRange(this.cursorPosition, this.cursorPosition);
    });
  },
},

内容的提问来源于stack exchange，提问作者Neha Soni