js 给光标选中位置添加内容

//点击后执行逻辑 
//获取dom 也就是光标选中的dom 这个需要事先写好
  var elInput = document.getElementById("expressionText");
            //光标开始的下标
             var startPos = elInput.selectionStart;
             //光标结束的下标
             var endPos = elInput.selectionEnd;
             if (startPos === undefined || endPos === undefined) return
              //获取dom中的值
             var txt = elInput.value;
             //光标开始跟结束之间内容替换
             var result = txt.substring(0, startPos) +record.idxKey + txt.substring(endPos)
            //值替换到dom中
             elInput.value = result;
        //聚焦
             elInput.focus();
        //设置光标的位置设为添加内容后的位置
             elInput.selectionStart = startPos + record.idxKey.length;

             elInput.selectionEnd = startPos + record.idxKey.length;
             //走完值已经插入了

封装成一个方法

  //光标内容替换
  //传入id和内容
      selectStartContext(id,text){
        //获取dom
        var elInput = document.getElementById(id);
        //光标开始的下标
        var startPos = elInput.selectionStart;
        //光标结束的下标
        var endPos = elInput.selectionEnd;
        if (startPos === undefined || endPos === undefined) return
        //获取dom中的值
        var txt = elInput.value;
        //光标开始跟结束之间内容替换
        var result = txt.substring(0, startPos) +text + txt.substring(endPos)
        elInput.value = result;
        elInput.focus();
        //设置光标的位置设为添加内容后的位置
        elInput.selectionStart = startPos + text.length;
        elInput.selectionEnd = startPos + text.length;
      },

获取光标位置后 放置内容 然后再把光标放到后面

        const myField = document.querySelector('#'+id);

        if(myField.selectionStart || myField.selectionStart === 0) {

          let startPos = myField.selectionStart;

          let endPos = myField.selectionEnd;
          this.$set(this.model,'expression',myField.value.substring(0, startPos) + text
            + myField.value.substring(endPos, myField.value.length))
           this.$nextTick() // 这句是重点, 圈起来

          myField.focus();

          myField.setSelectionRange(endPos + text.length, endPos + text.length);