textarea中获得鼠标位置，插入值

### 前端实现输入框鼠标位置插入标签的方法 在前端开发中，实现在输入框的光标位置动态插入特定内容（如标签）是一个常见的需求。以下是通过 JavaScript 和 Vue.js 的方式来完成这一功能的具体方法。 #### 使用原生 JavaScript 实现 可以通过监听 `input` 或 `click` 事件捕获用户的交互行为，并利用 DOM API 获取光标的当前位置，随后将目标内容插入其中[^1]： ```javascript function insertAtCursor(inputElement, valueToInsert) { const startPos = inputElement.selectionStart; const endPos = inputElement.selectionEnd; const oldValue = inputElement.value; // 将新值插入到选区中间 const newValue = oldValue.substring(0, startPos) + valueToInsert + oldValue.substring(endPos); // 更新输入框的内容并重置光标位置 inputElement.value = newValue; inputElement.setSelectionRange(startPos + valueToInsert.length, startPos + valueToInsert.length); } // 绑定点击事件用于测试 document.getElementById('insertButton').addEventListener('click', () => { const inputValue = document.getElementById('textInput'); insertAtCursor(inputValue, '[TAG]'); }); ``` 上述代码片段展示了如何定义一个函数 `insertAtCursor` 来处理插入逻辑，并绑定按钮触发该操作[^2]。 --- #### 结合 Vue.js 及 Ant Design Vue 实现 如果项目基于 Vue 框架，则可以更高效地管理状态和组件间通信。以下是在 Vue 中结合 Ant Design Vue 的解决方案[^4]: ```html <template> <a-textarea v-model="content" @blur="handleBlur"></a-textarea> <button @click="insertTag">插入 TAG</button> </template> <script> export default { data() { return { content: '', cursorPosition: null, }; }, methods: { handleBlur(event) { this.cursorPosition = event.target.selectionStart; // 记录光标位置 }, insertTag() { if (this.cursorPosition === null || !this.content) return; const beforeText = this.content.slice(0, this.cursorPosition); // 光标前的文字 const afterText = this.content.slice(this.cursorPosition); // 光标后的文字 const tag = '[TAG]'; // 要插入的标签 this.content = `${beforeText}${tag}${afterText}`; this.$nextTick(() => { this.setCursorPosition(this.cursorPosition + tag.length); // 移动光标至插入点之后 }); }, setCursorPosition(position) { const textarea = this.$el.querySelector('textarea'); // 找到对应的 textarea 元素 if (!textarea) return; textarea.focus(); textarea.setSelectionRange(position, position); } }, }; </script> ``` 此方案的核心在于使用 `v-model` 数据绑定以及 `@blur` 事件记录光标位置，在执行插入动作时重新计算字符串拼接的结果，并调整光标位置以保持用户体验一致[^3]。 --- #### 注意事项 - **跨浏览器兼容性**：不同浏览器可能对 `selectionStart`/`selectionEnd` 属性的支持存在差异，需提前验证。 - **性能优化**：频繁更新大文本可能导致界面卡顿，建议针对具体场景评估性能影响。 - **安全性校验**：对于用户输入的数据应做必要的过滤与转义，防止 XSS 攻击等问题发生。