vue3,光标所在位置插入一串字符,没有选中光标的话默认在输入框最前面添加一串字符
时间: 2023-02-14 10:29:16 浏览: 124
如果您想在光标所在的位置插入一串字符,你可以使用 Vue3 中的 ref 和一些原生 DOM 操作。
首先,你需要在模板中为输入框设置一个 ref。
```
<template>
<input ref="input" />
</template>
```
然后,你可以使用 this.refs.input 来访问这个输入框的 DOM 元素。
接着,你可以使用 selectionStart 和 selectionEnd 属性来获取光标的位置,并使用 setSelectionRange 方法来设置光标的位置。
最后,你可以使用 value 属性来获取和设置输入框的值,然后使用模板字符串来拼接字符串。
例如:
```
insertString(str) {
const input = this.refs.input
const { value, selectionStart, selectionEnd } = input
input.value = `${value.slice(0, selectionStart)}${str}${value.slice(selectionEnd)}`
input.setSelectionRange(selectionStart + str.length, selectionStart + str.length)
}
```
如果你想在输入框最前面添加一串字符,你可以将上面的代码中的 selectionStart 和 selectionEnd 替换成 0 即可。
例如:
```
insertString(str) {
const input = this.refs.input
const { value } = input
input.value = `${str}${value}`
input.setSelectionRange(str.length, str.length)
}
```
希望这些信息能帮到你!
阅读全文