vue如何在光标处插入文字

最新推荐文章于 2024-07-03 11:08:48 发布

前方太黑暗

最新推荐文章于 2024-07-03 11:08:48 发布

阅读量3.6k

点赞数 5

分类专栏： vue 文章标签： vue el-input 光标位置插入字符

本文链接：https://blog.csdn.net/xcc_2269861428/article/details/123679641

版权

vue 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

这篇博客介绍了一种方法，通过JavaScript在输入框内的指定位置动态插入日期、时间和自定义变量。用户点击相应的标签，利用光标位置记录和字符串截取技术，能够将'[日期]'、'[时间]'等文本插入到输入框的光标处，方便创建如'计划1'、'计划2'这样的格式化名称。

摘要由CSDN通过智能技术生成

列子：

如何想要在侧的事故打打的中间插入下面的日期，时间等文字

思路，通过e.srcElement.selectionStart 记录光标位置，然后通过slice截取拼接字符串

<el-form-item label="计划名称" prop="campaignName">
          <el-input v-model="form.campaignName" size="small" style="width: 800px;" maxlength="100" show-word-limit @blur="campaignNameBlur"></el-input>
          <br/>
          <span class="red" style="margin-left: 10px;">生成规则：(定向个数 x 素材个数)；变量为名字后面追加数字，从1开始，如：计划1，计划2。</span>
          <br/>
          <el-tag size="small" style="cursor: pointer;margin-left: 5px;" @click="campaignFormatChar('[日期]')">+日期</el-tag>
          <el-tag size="small" style="cursor: pointer;margin-left: 5px;" @click="campaignFormatChar('[时间]')">+时间</el-tag>
          <el-tag size="small" style="cursor: pointer;margin-left: 5px;" @click="campaignFormatChar('[定向]')">+定向</el-tag>
          <el-tag size="small" style="cursor: pointer;margin-left: 5px;" @click="campaignFormatChar('[变量]')">+变量</el-tag>
        </el-form-item>

this.campaignNameIndex 是定义在data中的

下面的方法是写在method中的

/** 广告计划名称记录光标位置 **/
      campaignNameBlur(e){
        this.campaignNameIndex = e.srcElement.selectionStart;
      },

      /** 广告计划名称替换字符 **/
      campaignFormatChar(val){
        if(this.form.campaignName){
          let index = this.campaignNameIndex;
          let name = this.form.campaignName;
          //this.form.campaignName = this.form.campaignName + val;
          this.form.campaignName = name.slice(0,index) + val + name.slice(index);
        }else{
          this.form.campaignName = val;
        }
      },