首页vue3实现一个输入框光标位置插入指定字符

vue3实现一个输入框光标位置插入指定字符

时间: 2023-07-16 07:13:36 浏览: 571

可以使用 `ref` 获取输入框的 DOM 元素，然后在插入字符的时候获取光标位置并插入字符。具体实现可以参考以下代码： ``` <template> <div> <input ref="input" type="text" v-model="text" @keydown.enter.prevent="insertChar"> </div> </template> <script> import { ref } from 'vue'; export default { setup() { const text = ref(''); // 获取输入框的 DOM 元素 const inputRef = ref(null); const inputEl = inputRef.value; // 插入指定字符 const insertChar = () => { const startPos = inputEl.selectionStart; const endPos = inputEl.selectionEnd; const char = 'X'; text.value = text.value.substring(0, startPos) + char + text.value.substring(endPos, text.value.length); inputEl.selectionStart = inputEl.selectionEnd = startPos + 1; }; return { text, inputRef, insertChar }; } }; </script> ``` 在上面的代码中，我们使用 `ref` 创建了一个名为 `inputRef` 的引用，然后通过 `inputRef.value` 获取到输入框的 DOM 元素。在 `insertChar` 方法中，我们先获取当前的光标位置 `startPos` 和 `endPos`，然后插入指定字符，最后将光标位置设置到插入的字符后面。需要注意的是，在模板中我们使用了 `@keydown.enter.prevent` 修饰符来阻止回车键默认事件，以便在按下回车键时执行 `insertChar` 方法。

阅读全文