输入框中光标插入数据

sogooday

已于 2023-07-05 11:24:03 修改

阅读量223

点赞数

分类专栏： js 文章标签： javascript html 前端富文本字符串插入

于 2023-04-12 11:23:24 首次发布

本文链接：https://blog.csdn.net/huhudeni/article/details/130090100

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

0 动态示意图

1 需要获取到dom

//获取输入框DOM
  getTextareaDom(){
    let textarea = document.getElementsByTagName('textarea')[0];
    return textarea;
  },

2 绑定输入框的失去焦点事件

 //绑定失去焦点的事件
  textareaInfo($this) { 
    let textarea = $this.getTextareaDom(); 
    textarea.onblur = function(){ 
      //将光标信息记录下来
      $this.setfocusIndex($this,textarea.selectionStart,textarea.selectionEnd,true)
    }
  },

3，光标的信息储存与获取

 //设置光标的信息
  setfocusIndex($this,selectionStart,selectionEnd,bool=false){
    let data = {
        selectionStart,
        selectionEnd,
        bool,
      } 
    //将数据储存起来  这个是目前是我使用的储存方式
    //!!本意是讲数据值储存起来，方便使用，你可以使用你自己的方式
    $this.$set($this.formData,'focusIndexData',data);
  },
  //获取光标的相关信息
  getfocusIndex($this){ 
    //默认一个数据
    let data = {
      selectionStart: 0,
      selectionEnd : 0,
      bool:false,
    }
    let focusIndexData  = data;
    //获取储存到的数据
    //!!将储存的数据取出来
    if($this.formData && $this.formData.focusIndexData){
      focusIndexData = $this.formData.focusIndexData;
    } 
    return focusIndexData
  },

4 将指定数据插入到字符中某个位置

 //往字符串中插入相关字符
 //整体思路是将allStr每个元素拆分出来，变为数组
 //然后用splice对数组进行数据穿插使用
  strInset(start, end, insetStr, allStr) {
    console.log("start", start, "end", end, "insetStr", insetStr, 'allStr', allStr)
    console.log("insetStr.length:", insetStr.length, 'allStr.length:', allStr.length)
    let needStr = insetStr
    let str2array = []
    // let longBool = (long <= 1); 
    //组字符拆分出来 组成数组
    for (let i = 0; i < allStr.length; i++) {
      str2array.push(allStr[i])
    }
    //插入的一个点不是一个范围
    if (start == end) {
      //在指定位置插入相关字符
      str2array.splice(start, 0, insetStr)
    }
    else {
      //插入得是一个范围
      //将数组插入到开始位置
      str2array.splice(start, 0, insetStr);
      //将新组成得字符串 ，从新计算要删除的字符串的开始位置与结束位置
      //要删除的字符的长度
      let long = end - start
      //要删除的字符的起始位置
      let newStart = start + 1;
      console.log('要删除的字符的长度', long, 'start', start, 'end', end)
      console.log('起使位置', newStart)
      //删除置动字符
      str2array.splice(newStart, long)
      console.log('str2array:', str2array)
    }
    needStr = str2array.join('');
    return needStr
  }

5 完成组装

//获取光标记录
let focusIndexData = this.getfocusIndex(this);
//有储存用户的光标
if(focusIndexData.bool){ 
   let selectionStart = focusIndexData.selectionStart;
   let selectionEnd = focusIndexData.selectionEnd
   //将字符串进行加工得到最新的字符串
   let changeStr = this.strInset(selectionStart,selectionEnd,newcontent,content)
   console.log('加工后得到的字符串：',changeStr);
   //将光标记录清除
   this.setfocusIndex(this,0,0,false)
}