当前位置：首页 > VUE

vue怎么实现光标重置

2026-01-23 10:16:16VUE

Vue 实现光标重置的方法

在 Vue 中实现光标重置通常涉及到操作 DOM 元素，特别是在输入框或文本区域中。以下是几种常见的方法：

使用 ref 和原生 DOM 方法

通过 Vue 的 ref 属性获取 DOM 元素，并调用 setSelectionRange 方法重置光标位置。

vue怎么实现光标重置

<template>
  <input ref="inputField" v-model="inputValue" />
  <button @click="resetCursor">重置光标</button>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    resetCursor() {
      this.$refs.inputField.setSelectionRange(0, 0)
      this.$refs.inputField.focus()
    }
  }
}
</script>

使用 v-model 和 nextTick

在修改输入框的值后，使用 nextTick 确保 DOM 更新完成后再重置光标。

vue怎么实现光标重置

<template>
  <input ref="inputField" v-model="inputValue" />
  <button @click="updateValue">更新值并重置光标</button>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '初始值'
    }
  },
  methods: {
    updateValue() {
      this.inputValue = '新值'
      this.$nextTick(() => {
        this.$refs.inputField.setSelectionRange(0, 0)
        this.$refs.inputField.focus()
      })
    }
  }
}
</script>

动态创建输入框

通过重新渲染输入框的方式强制重置光标。这种方法适用于需要完全重置输入框状态的场景。

<template>
  <input v-if="showInput" v-model="inputValue" />
  <button @click="recreateInput">重新创建输入框</button>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      showInput: true
    }
  },
  methods: {
    recreateInput() {
      this.showInput = false
      this.$nextTick(() => {
        this.showInput = true
      })
    }
  }
}
</script>

使用自定义指令

创建一个自定义指令来管理光标位置，适用于需要频繁操作光标的场景。

<template>
  <input v-cursor v-model="inputValue" />
</template>

<script>
export default {
  directives: {
    cursor: {
      inserted(el) {
        el.focus()
        el.setSelectionRange(0, 0)
      }
    }
  },
  data() {
    return {
      inputValue: ''
    }
  }
}
</script>