vue 如何获取input中光标位置，并且点击按钮在当前光标后追加指定内容

vue 如何获取input中光标位置，并且点击按钮在当前光标后追加内容监听输入框的鼠标失焦事件获取失去交点时的光标在输入内容中的位置（e.srcElement.selectionStart）替换指定内容（str.slice(0, index)）具体代码实现如下：<template><el-input v-model="addForm.templateContent" type

bigSmileZ

8621人浏览 · 2022-02-17 11:04:16

bigSmileZ · 2022-02-17 11:04:16 发布

vue 如何获取input中光标位置，并且点击按钮在当前光标后追加内容

监听输入框的鼠标失焦事件
获取失去交点时的光标在输入内容中的位置（e.srcElement.selectionStart）
替换指定内容（str.slice(0, index)）
具体代码实现如下：

<template>    
 <el-input v-model="addForm.templateContent" type="textarea" @blur="blurEvent"></el-input>
  <el-button plain  type="primary" size="mini" @click="insertContentHandle(“我是插入的内容”)">向光标位置插入内容</el-button>
</template>
<script>
export default {
  data () {
    return {
      addForm: {
        templateContent: "",
      },
      blurIndex: null,//记录光标位置
    }
  },
  // 方法集合
  methods: {
    // 获取光标所在位置的index
    blurEvent(e) {
      this.blurIndex = e.srcElement.selectionStart;
      console.log(e)
      console.log(e.srcElement)
      console.log(e.srcElement.selectionStart) //光标所在的位置
    },
     // 插入内容的方法
    insertContentHandle(text) {
      let index=this.blurIndex
      let str=this.addForm.templateContent
      this.addForm.templateContent=str.slice(0, index) + text + str.slice(index);
    },
  }
}
</script>
<style lang='scss' scoped>
</style>