Vue input textarea输入框通过光标位置插入想要的值

先看一下问题

textarea的代码

 <Input  ref="variableText" id="test"  @blur.native.capture="" v-model="formData.smsContent"  type="textarea"  :autosize="{minRows: 10}"    />

动态button，可以传输不同的值：

 <Button  size="large" style="color: #0A7AD1" long="true" @click="getPositionForTextAreaTest(but)" v-for="but in buts">{{but}}</Button>

获取光标函数：

function getPositionForTextArea(ctrl){
  let CaretPos = 0;
  if(ctrl.selectionStart || ctrl.selectionStart == '0'){// Firefox support
    CaretPos = ctrl.selectionStart;
  }
  // console.log(CaretPos);
  return CaretPos;
}

export {
  getPositionForTextArea
}

注意，在vue里面的input和html原生的的获取方式是不一样

<Input  ref="variableText" id="test"  @blur.native.capture="" v-model="formData.smsContent"  type="textarea"  :autosize="{minRows: 10}"    />

这个是vue的Button其获取方式是：

 getPositionForTextAreaTest(a){
      debugger;
      let position = document.getElementById("test").getElementsByTagName("textarea")[0];
      let pos =   getPositionForTextArea(position);
      console.log(pos);
      let y = position.value;
      console.log(y)
      this.frontString = y.substring(0,pos);
      this.afterString = y.substring(pos,this.formData.smsContent.length);
      console.log(this.frontString);
      console.log(this.afterString);
      // this.formData.smsContent = '';
      this.formData.smsContent = this.frontString+a+this.afterString;
      console.log(y)
    },

对于原生的html的button和input的使用

 其获取规则

 getPositionForTextAreaTest(a){
      debugger;
      let position = document.getElementById("testInput");
      let pos =   getPositionForTextArea(position);
      console.log(pos);
      let y = position.value;
      console.log(y)
      this.frontString = y.substring(0,pos);
      this.afterString = y.substring(pos,this.formData.smsContent.length);
      console.log(this.frontString);
      console.log(this.afterString);
      // this.formData.smsContent = '';
      this.formData.smsContent = this.frontString+a+this.afterString;
      console.log(y)
    },

对于前端从textarea获取光标位置，可以参考：https://m.jb51.net/article/25839.htm