2021/12/2 获取文本域选中内容 Selection对象

html

 <el-input
            type="textarea"
            @focus="checkfocus()"
            @blur="checkonblur()"
            @input="HistoryChange()"
            id="reverse"
            :rows="5"
            placeholder="请输入内容"
            v-model="textarea"
          >
</el-input>

标识

  data() {
    return {
      ischoose: false, //是否选择文本域内容
    };
  },

因为选中事件监听的是整个页面，但是只需要获取文本域选中内容，所以采用标记法 

 //点击了文本域 加标识
    checkfocus() {
      this.ischoose = true;
      console.log(this.ischoose, "加标识");
    },
    //离开了文本域 去除标识
    checkonblur() {
      this.ischoose = false;
      console.log(this.ischoose, "去除标识");
    },

//模拟组合键触发函数
    keyCodeForEvent() {
      // 鼠标事件
      document.addEventListener("click", (e) => {
        var selObj = document.getSelection();
        // 选中了 双标签
        if (selObj.toString().length > 0 && this.ischoose) {
          console.log(selObj.toString(), "aaa");
         // 键盘事件
           clearTimeout(timer);
            if (e.altKey && e.keyCode === 79) {
              // alt+o
              this.AddLabel("<tag></tag>");
            }
      });
        }else {
            //单标签
        }
      });
    },

2021/12/3 获取选中区域开始和结束

var field = document.getElementById("reverse");
var startPos = field.selectionStart; //开始
var endPos = field.selectionEnd; //结束
console.log('开始',startPos, '结束',endPos);
this.addDoubletxt = field.value.substring(startPos, endPos); //选中内容 

遇到的问题

对文本域内文字选择时多次触发鼠标事件	解决办法： 第一种：给两个变量 重新赋值开始时间和结束时间 第二种： clearTimeout(timer); if (e.altKey && e.keyCode === 85) { timer = setTimeout(() => { //代码部分 }, 0);
加单标签和双标签都可以调用同一个方法AddLabel
对输入框修改后(不进行提交的情况下)，如何撤销上一步操作
在添加完标签后，设置光标位置定位在标签后
限制标签内不能加标签

2022/1/13更

加单标签和双标签都可以调用同一个方法AddLabel

思路：判断加的字符中有超过1个’<‘，就说明加的是双标签

 // 加标签
    AddLabel(value) {
      timer = setTimeout(() => {
        var sum = 0;//记录出现次数
        for (var i = 0; i < value.length; i++) {
          // 查找到两个'<'就是双标签
          if (value[i] == "<") {
            sum = sum + 1;
          }
        }
        if (sum > 1) {
          //双标签
          this.labelLength = value.length + this.addDoubletxt.length;
          var a = value.indexOf(">");
          var value1 = value.substring(0, a + 1);//<tag>
          var value2 = value.substring(a + 1, this.labelLength);//</tag>
          if (this.addDoubletxt) {
            this.textarea =
              this.field.value.substring(0, this.startPos) +
              value1 +
              `${this.addDoubletxt}` +
              value2 +
              this.field.value.substring(this.endPos, this.field.value.length);
            this.addDoubletxt = ""; //清空选中
          }
        } else {
          //单标签
          this.labelLength = value.length;
          this.textarea =
            this.field.value.substring(0, this.startPos) +
            value +
            this.field.value.substring(this.endPos, this.field.value.length);
        }
        console.log(sum, "一共几次");

        //保存历史修改
        this.HistoryChange();
        //修改后设置光标位置
        this.updateFocus();
      }, 0);
    },

对输入框修改后(不进行提交的情况下)，如何撤销上一步操作

思路：把每次修改的值存到定义的数组中，触发撤回操作时，从数组中通过索引取

  data() {
    return {
      textArr: [], //保存上次和本次
      changeNum: 0, //记录改变的次数
    };
  },

//改变了文本域
HistoryChange() {
      this.textArr.push(this.textarea); //把每次当前值存起来
      this.changeNum++;//记录改变的次数
},

在添加完标签后，设置光标位置定位在标签后

思路：计算添加标签后的位置，重新定义光标位置即可(赋值)

//重新定义光标位置
    updateFocus() {
      this.field.focus();
      //光标定位要加上 setTimeOut，不然就会重新光标定位失败
      setTimeout(() => {
      //光标位置=鼠标选中位置+标签长度
        this.field.selectionStart = this.field.selectionEnd =
          this.startPos + this.labelLength;
        this.startPos = this.endPos + this.labelLength;
        this.endPos = this.endPos + this.labelLength;
      }, 30);
},

2022/1/14更

限制标签内不能加标签

思路：因为加标签是通过鼠标+键盘事件(快捷键)加的

所以首先判断在标签内，在标签内禁止键盘事件即可~

...待整理