前端文本输入框不能删除某指定字符_js禁止删除文字内容-CSDN博客

本文链接：https://blog.csdn.net/L99233/article/details/129127731

文章描述了一个在Vue.js应用中实现的文本框，其中部分文字（如【】内的内容）是不允许编辑的。通过监听键盘事件和选择范围，阻止用户删除或修改预设模板文字。然而，对于用户使用输入法直接替换文本的场景，当前方案尚无解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前在工作中遇到个要求文本框给定一个描述文字模板，不能编辑【】以内的内容,其余内容可随意填写。

模板文本如下：

您于【2022年12月16日13时25分】，对任务【疫情】，设置了【疫情】相关的关键字并在指定站点【xxx、xxx、xxx】下发了监测任务。

<el-input v-model="reportConfigForm.desc" type="textarea" @keydown.delete.native="handleDeleteKeyDown" @select.native="handleDescSelect"></el-input>

//选中描述文字回调，获取鼠标所选字符串的起始位置
    handleDescSelect(e) {
      this.descSelectStart = e.target.selectionStart
      this.descSelectEnd = e.target.selectionEnd
    },
//按下退格键删除描述文字回调
    handleDeleteKeyDown(e) {
      this.descSelectStart = e.target.selectionStart
      this.descSelectEnd = e.target.selectionEnd
      let inRangeArr = []
      let deleteStartIndex = 0
      let deleteEndIndex = 0
      if(this.descSelectStart === this.descSelectEnd) { //只删除一个字符
        deleteEndIndex = this.descSelectEnd -1
        inRangeArr = this.bracketsIndexRangeArr.find( range => {
          return  deleteEndIndex >= range[0] && deleteEndIndex <= range[1]
        })
        if(inRangeArr) {
          this.$message.warning('不可删除【】内文字')
          e.preventDefault() //阻止删除操作
        }else {
          this.$nextTick( () => {
            this.getDontDeleteDescCharacter()
          })
        }
      }else { //删除多个
        deleteStartIndex = this.descSelectStart
        deleteEndIndex = this.descSelectEnd -1
        inRangeArr = this.bracketsIndexRangeArr.find( range => {
          return  (deleteStartIndex >= range[0] && deleteStartIndex <= range[1]) || (deleteEndIndex >= range[0] && deleteEndIndex <= range[1] || deleteStartIndex <= range[0] && deleteEndIndex >= range[1])
        })
        if(inRangeArr) {
          this.$message.warning('不可删除【】内文字')
          e.preventDefault()
        }else {
          this.$nextTick( () => {
            this.getDontDeleteDescCharacter()
          })
        }
      }
    },
//计算描述模板内不可删除文字内容的位置
    getDontDeleteDescCharacter() {
      this.bracketsIndexRangeArr = []
      let leftBracketsArr = this.getAppointChar('【') // 【 出现的位置索引数组
      let rightBracketsArr = this.getAppointChar('】')// 】 出现的位置索引数组
      leftBracketsArr.forEach( (left,leftIndex) => {
        this.bracketsIndexRangeArr.push([left,rightBracketsArr[leftIndex]]) //获取【】索引区间所对应的二维数组
      })
    },
//返回指定查找字符在字符串中出现的位置
    getAppointChar(char) {
      let indexArr = []
      console.log(this.reportConfigForm.desc.length);
      let index = this.reportConfigForm.desc.indexOf(char);//首先找出第一次寻找到的位置
      let num = 0;
      while (index !== -1) {
        indexArr.push(index)
        num++;//找到的次数
        index = this.reportConfigForm.desc.indexOf(char, index + 1);//寻找下一个
      }
      console.log(indexArr);
      return indexArr
    },

不过还有一个问题就是用户多选过后不按键盘退格键，直接用输入法输入要替换的文本，目前还有这个问题没解决，希望有想法的朋友能交流一下