JS操作文本域获取光标/指定位置插入

学习链接

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方法去选中文本前，一定要先focus
            textarea.focus();
            // 将光标选中指定的文字，如果指定的selectionStart和selectionEnd相同，那就是选择固定的某个位置。如果不同，那就是选择一段文字。
            textarea.setSelectionRange(1,2)
        },

        restoreSelection() {
            /* 可以直接获取文本域最后一次失焦的位置，然后通过这个位置恢复之前的选择 */
            let textarea = this.$refs['textarea'];
            console.log(textarea.selectionStart,textarea.selectionEnd,'start,end');
            
            // 调用setSelectionRange方法去选中文本前，一定要先focus
            textarea.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>