在输入框光标位置插入文本

<template>
    <div>
        <textarea id="myTextarea" rows="6" cols="50">在这里输入一些文本。</textarea>
        <button @click="insertText('【插入的文本】')">点击插入预设文本</button>
    </div>
</template>
<script>
    export default {
        methods: {
            insertText(textToInsert) {
                // 1. 获取输入框元素
                const textarea = document.getElementById('myTextarea');

                // 2. 获取当前光标位置
                const startPos = textarea.selectionStart;
                const endPos = textarea.selectionEnd;

                // 3. 获取输入框当前的文本值
                const currentValue = textarea.value;

                // 4. 在光标位置插入新文本
                // 新文本 = 光标前的文本 + 要插入的文本 + 光标后的文本
                textarea.value = currentValue.substring(0, startPos)
                    + textToInsert
                    + currentValue.substring(endPos);

                // 5. 计算新的光标位置（在插入的文本之后）
                const newCursorPos = startPos + textToInsert.length;

                // 6. 将光标设置到新位置
                textarea.setSelectionRange(newCursorPos, newCursorPos);

                // 7. 让输入框重新获得焦点，方便用户继续输入
                textarea.focus();
            }
        }
    }
</script>