学习链接
js 如何获取与设置光标在input框的位置
在输入框/文本域中光标位置插入字符串
Web 中的“选区”和“光标”
可参考另外一篇：vue.js支持表情输入，这个比操作 div简单多了。
效果图
代码
<style scoped>textarea {outline: none;resize: none;border: 1px solid red;width: 400px;height: 200px;margin: 0;padding: 0;font-size: 16px;padding: 10px;font-family: monospace;}</style><template><div class="commennt-wrapper"><el-button type="primary" size="mini" @click="getSelection">getSelection</el-button><el-button type="primary" size="mini" @click="setSelection">setSelection</el-button><el-button type="primary" size="mini" @click="restoreSelection">restoreSelection</el-button><el-button type="primary" size="mini" @click="replaceSpecified">replaceSpecified</el-button><br/><br/><textarea ref="textarea" v-model="content" id="textarea" cols="30" rows="10"></textarea></div></template><script>export default {name: 'Comment',data() {return {content: '诺艾尔邀约任务截图',}},mounted() {},methods: {getSelection() {let textarea = this.$refs['textarea'];// 获取文本域光标光标的开始位置和结束位置// 1. 位置定义：文本框中有文字的话，第一个文字的左边是0，右边是1，第二个文字的左边是1，右边是2// 2. 当页面刚加载完，文本域中有默认文字，那么selectionStart和selectionEnd都是相同的数值，都是最后一个位置，即有多少个文字，数值就是多少// 3. 如果是选中了文本，那么selectionStart就是被选中文字最左边开始的位置的数值（上面已说明），selectionEnd就是被选中文字最右边结束的位置的数值（上面已说明）// 4. 注意：当点击了文本域某个位置（或选择了一段文字），然后又失去焦点，仍然可以通过下面的方法获取到光标之前的位置console.log(textarea.selectionStart,textarea.selectionEnd,'start,end');},setSelection() {let textarea = this.$refs['textarea'];// 调用setSelectionRange方法去选中文本前，一定要先focustextarea.focus();// 将光标选中指定的文字，如果指定的selectionStart和selectionEnd相同，那就是选择固定的某个位置。如果不同，那就是选择一段文字。textarea.setSelectionRange(1,2)},restoreSelection() {/* 可以直接获取文本域最后一次失焦的位置，然后通过这个位置恢复之前的选择 */let textarea = this.$refs['textarea'];console.log(textarea.selectionStart,textarea.selectionEnd,'start,end');// 调用setSelectionRange方法去选中文本前，一定要先focustextarea.focus();textarea.setSelectionRange(textarea.selectionStart,textarea.selectionEnd)},replaceSpecified() {// 将选中的文字替换掉，或者是在指定的位置插入文字let textarea = this.$refs['textarea'];console.log(textarea.selectionStart,textarea.selectionEnd,'start,end');// 最开始的位置要记录下，后面要根据它来设置插入文本后，设置光标的位置let selectionStart1 = textarea.selectionStart let txtArr = textarea.value.split('')txtArr.splice(textarea.selectionStart,textarea.selectionEnd - textarea.selectionStart,'love')textarea.value = txtArr.join('')// 替换文本后, 需要把光标，再次定位到替换后的那个位置，否则，它会回到最前面textarea.focus()textarea.setSelectionRange(selectionStart1 + 'love'.length,selectionStart1 + 'love'.length)}},components: {}}</script>
