前端限制input框内部分文字不可编辑

<el-input type="textarea" v-model="formData.val" placeholder="请输入"          
    @keydown.delete.native="onDeleteKeyDown" @keydown.native="onKeyDown"
    @compositionstart.native="onCompositionStart" @compositionend.native="compositionend"></el-input>
    onDeleteKeyDown(e) {
      let { selectionStart, selectionEnd } = e.target;
      // 如果包含不能删除的区域位置,阻止删除
      if (!(selectionStart > 7 || selectionEnd < 0)) {
        e.preventDefault();
      }
    },

    onKeyDown(e) {
      // 如果包含不能删除的区域,禁止
      if (!(e.target.selectionStart > 6 || e.target.selectionEnd < 0)) {
        e.preventDefault();
      }
    },
    // 输入法键盘字符下不可输入,记录输入的起始位置
    onCompositionStart(e) {
      this.checkText = e.data; //记录选中的文字
      this.startVal = e.target.selectionStart;
    },

    // 当在不可编辑的范围内输入是,结合输入文字开始位置this.startVal和输入结束
    // e.target.selectionEnd位置,通过字符串截取并接还原原来的字符。
    compositionend(e) {
      if (this.startVal !== null) {
        this.$nextTick(() => {
          if (this.startVal < 7) {
            let targetVal = e.target.value;
            let startTarget = targetVal.substring(0, this.startVal);
            let endTarget = targetVal.substring(e.target.selectionEnd);
            e.target.value = startTarget + this.checkText + endTarget;
          }
        });
      }
    },
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容