element ui - el-input implements the function of clicking to insert keywords

---

Preface

Function description:

• el-input text box, click on the keyword below to insert the word in the text box;
• Move the cursor between the text, then click on the keyword below to insert the word at the cursor position;
• After inserting the keyword, the text box gets the focus, positions the cursor to the keyword, clicks the button, and inserts the button's keyword at the specified position in the text box.

Effect:

Ideas

• Add a lost focus event to the label @blur="handleInputBlur";
• Get the cursor position;
• When clicking a keyword, the text content is split from the cursor position, the keyword is spliced, the focus is set, and the cursor position is processed.

code

html part:

<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 part:

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;
        });
      }
    },
}

---

Summarize

Reference link: The input text box realizes the click-to-insert word function