前端限制input框內(nèi)部分文字不可編輯

<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;
      // 如果包含不能刪除的區(qū)域位置,阻止刪除
      if (!(selectionStart > 7 || selectionEnd < 0)) {
        e.preventDefault();
      }
    },

    onKeyDown(e) {
      // 如果包含不能刪除的區(qū)域,禁止
      if (!(e.target.selectionStart > 6 || e.target.selectionEnd < 0)) {
        e.preventDefault();
      }
    },
    // 輸入法鍵盤字符下不可輸入,記錄輸入的起始位置
    onCompositionStart(e) {
      this.checkText = e.data; //記錄選中的文字
      this.startVal = e.target.selectionStart;
    },

    // 當(dāng)在不可編輯的范圍內(nèi)輸入是,結(jié)合輸入文字開始位置this.startVal和輸入結(jié)束
    // 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;
          }
        });
      }
    },
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容