在当前光标位置添加文本

在当前光标位置添加文本

html

<el-input ref="variableText" id="testInput" v-model="smsContent" type="textarea" :autosize="{ minRows: 10 }" placeholder="输入框">/el-input>
<el-button size="large" style="color: #0A7AD1" long="true" @click="addBtn(but)" >点击添加按钮</el-button>

js

export default {
  data() {
    return {
      smsContent: "",
    };
  },
  methods: {
	// 封装一个获取光标的方法
	getPositionForTextArea(ctrl) {
	  let CaretPos = 0;
	  if (ctrl.selectionStart || ctrl.selectionStart == "0") {
	    CaretPos = ctrl.selectionStart;
	  }
	  return CaretPos;
	},
    addBtn(a) {
      let position = document.getElementById("testInput");
      // 调用封装好的方法
      let pos = this.getPositionForTextArea(position);
      let y = position.value;
      this.frontString = y.substring(0, pos);
      this.afterString = y.substring(pos, this.formData.smsContent.length);
      // 最后把点击后的值赋值给 Input 框
      this.smsContent = this.frontString + a + this.afterString;
    },
  },
};