vue实现定位光标
实现光标定位的基本方法
在Vue中实现光标定位通常需要操作DOM元素，结合HTML的contenteditable属性或input/textarea元素。核心是通过JavaScript的Selection和Range API控制光标位置。
<template>
<div>
<input ref="inputRef" v-model="text" />
<button @click="setCursorPosition(3)">定位到第3个字符</button>
</div>
</template>
<script>
export default {
data() {
return {
text: '示例文本'
}
},
methods: {
setCursorPosition(pos) {
const input = this.$refs.inputRef
input.focus()
input.setSelectionRange(pos, pos)
}
}
}
</script>在contenteditable元素中定位光标
对于可编辑的DIV元素，需要使用更复杂的Selection API：
<template>
<div
ref="editableDiv"
contenteditable
@input="handleInput"
>初始内容</div>
</template>
<script>
export default {
methods: {
setCursorAtEnd() {
const div = this.$refs.editableDiv
const range = document.createRange()
const sel = window.getSelection()
range.selectNodeContents(div)
range.collapse(false)
sel.removeAllRanges()
sel.addRange(range)
div.focus()
}
}
}
</script>动态计算光标位置
需要根据文本内容动态计算位置时，可以结合字符串操作：
methods: {
setCursorAfter(searchText) {
const input = this.$refs.inputRef
const index = this.text.indexOf(searchText) + searchText.length
if (index >= 0) {
input.setSelectionRange(index, index)
input.focus()
}
}
}处理多行文本区域
对于textarea元素的多行内容，需考虑换行符的影响：
setCursorToLine(textareaRef, lineNumber) {
const textarea = this.$refs[textareaRef]
const lines = textarea.value.split('\n')
if (lineNumber <= lines.length) {
let pos = lines.slice(0, lineNumber-1).join('\n').length
if (lineNumber > 1) pos += 1 // 加上换行符
textarea.setSelectionRange(pos, pos)
textarea.focus()
}
}兼容性注意事项
不同浏览器对Selection API的实现可能有差异，建议在使用前进行特性检测。现代浏览器都支持基本的setSelectionRange方法，但移动端可能需要额外处理触摸事件。
对于复杂的富文本编辑场景，建议使用专门的库如Quill.js或Tiptap，它们提供了更完善的光标控制API。
