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

原文链接:vue 如何获取input中光标位置,并且点击按钮在当前光标后追加内容

  1. 监听输入框的鼠标失焦事件;
  2. 获取失去交点时的光标在输入内容中的位置,data里定义一个变量存储如 blurIndex;
  3. 在指定位置绑定插入的方法【insert_flg】;
// html
<el-input @blur="handleInputBlur"></el-input>

// js
  data() {
    return {
      formulaValue:null,
      blurIndex: null,
    };
  }
  methods:{

  // 获取光标所在位置的index
   handleInputBlur(e) {
      this.blurIndex = e.srcElement.selectionStart;
    },

    // 插入按钮上绑定的方法
    insert_flg(flg) {
      let index=this.blurIndex
      let str=this.formulaValue
      this.formulaValue=str.slice(0, index) + flg + str.slice(index);
    },

  }


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容