博客

另一种获取光标的方法见文章

https://blog.csdn.net/Sunny_lxm/article/details/89445518

（一）、单元素

效果：

 <!-- 单元素获取光标位置 -->
<div class="el-textarea">
     <textarea v-model="content" id="textarea" type="textarea" rows="2" 
                autocomplete="off" ref="singleText">
    </textarea>
     <button @click="insert('<name>')" type="button">插入会员名</button>
</div>


methods:{

    async insert(myValue) {
          // const myField = document.querySelector('#textarea');
            const myField = this.$refs.singleText;
            if (myField.selectionStart || myField.selectionStart === 0) {
                var startPos = myField.selectionStart
                var endPos = myField.selectionEnd
                this.content = myField.value.substring(0, startPos) + myValue 
                            + myField.value.substring(endPos, myField.value.length)
                await this.$nextTick() // 这句是重点, 圈起来
                myField.focus()
                myField.setSelectionRange(endPos + myValue.length, endPos + myValue.length)
            } else {
                this.content += myValue
            }
        },

}
 

（二）、v-for循环的元素，通过this.refs找到对应的文本框，并插入字段

//v-for循环的元素，在光标处插入字段，并对兄弟元素没有影响
 <!-- 获取光标位置 -->
<div style="display:flex;flex-direction:column;">
     <div class="el-textarea" v-for="(item,index) in shoppeList" :key="index">
//绑定不同的model值，不然会影响到所有的textarea，这里绑定的model值是item.content，但是这个key值在item中目前是没有的
          <textarea v-model="item.content" type="textarea" rows="10" 
                autocomplete="off" ref="ttl"></textarea>
                <button @click="insertAtCursor(item,index)" type="button">插入字段</button>
      </div>
 </div>

data(){
    return{
        
         shoppeList: [
                {
                    id: 3,
                    value: "name"
                },
                {
                    id: 4,
                    value: "sex"
                }
            ],
    }

},
methods:{
    // 获取光标位置
   async insertAtCursor(item, index) {
//在这个地方要给item  set一个content，如果不手动set的话。textarea在没有输入文本之前是不能插入字段的
         this.$set(item , 'content', '');
         const myField = this.$refs.ttl[index];//虽然ref在v-for中不能绑定动态的，但是可以根据唯一标志找到对应的dom元素
         //console.log(item)
         // console.log(this.$refs.ttl[index]);
         const myValue = item.value;

        if (myField.selectionStart || myField.selectionStart === 0) {
                var startPos = myField.selectionStart;
                var endPos = myField.selectionEnd;
                item.content = myField.value.substring(0, startPos) + 
                "{" + item.value + "}" + 
                myField.value.substring(endPos, myField.value.length+2);
                await this.$nextTick(); // 这句是重点, 圈起来
                myField.focus();
                myField.setSelectionRange( endPos + item.value.length+2, 
                                            endPos + item.value.length+2);
            } else {
                item.content += "{" + myValue+2 + "}";
            }
        },





}