element ui - el-input 实现点击插入关键词功能

---

前言

功能描述：

• el-input文本框，通过点击下方关键词，在文本框中插入该词；
• 光标移动到文本之间，再点击下方关键词，在光标的位置插入该词；
• 插入关键词后，文本框获取焦点，并将光标的位置定位到关键词后点击按钮，在文本框指定位置插入该按钮的关键词。

效果：

思路

• 给标签加上失去焦点事件 @blur=“handleInputBlur”；
• 获取光标位置；
• 点击关键词时候，将文本内容从光标位置进行拆分，拼接关键词，设置焦点，处理光标位置。

代码

html部分：

<el-row>
	<el-col :span="24">
        <el-input
            ref="tipInput"
            type="textarea"
            placeholder="请输入内容"
            maxlength="1000"
            show-word-limit
            v-model="rowData['tip_content']"
            @blur="onInputBlur">
        </el-input>
     </el-col>
</el-row>

<el-row>
	<el-button :type="item.type" plain size="mini" v-for="(item,i) in btnList" :key="i"
                 @click="onTipBtnClick(item)">{{ item.name }}
    </el-button>
</el-row>

js部分：

data() {
	return {
      // 光标位置
      cursorIndex: '',
      // 按钮列表
      btnList: [{
        name: '举报时间',
        type: 'primary'
    }, {
        name: '被举报者昵称',
        type: 'primary'
    }, {
        name: '举报类型',
        type: 'primary'
    }, {
        name: '最终超时时间',
        type: 'primary'
    }, {
        name: '举报时间戳',
        type: 'primary'
    }, {
        name: '处罚类型',
        type: 'warning'
    }, {
        name: '处罚时长',
        type: 'warning'
    }, {
        name: '扣分分数',
        type: 'warning'
    }]
  }
},

methods: {
    // 获取文本框的光标位置
    onInputBlur(e) {
      this.cursorIndex = e.srcElement.selectionStart;
    },
	// 点击按钮插入关键词
    onTipBtnClick(item) {
      // 将文本内容在光标位置进行拆分
      let txt = this.rowData['tip_content'];
      let start = txt.substring(0, this.cursorIndex);
      let end = txt.substring(this.cursorIndex, txt.length);

      // 插入关键词
      this.rowData['tip_content'] = start + `${item.name}` + end;

      // 获取文本框，设置焦点，处理光标位置
      if (this.$refs[this.targetInputName]) {
        this.$refs[this.targetInputName].focus();
        this.$nextTick(() => {
          let input = this.$refs[this.targetInputName].$el.firstElementChild;
          input.focus();
          let addIndex = item.name.length;
          input.selectionStart = this.cursorIndex + addIndex;
          input.selectionEnd = this.cursorIndex + addIndex;
        });
      }
    },
}

---

总结

参考链接： 输入文本框实现点击插入词功能