文本框/文本域，部分文字不可编辑（输入/删除等）。

使用原生input和各个ui框架的input均可。

以下是以vue和elementui为例，第1个到第7个字符不可删除

重点是要用到键盘删除事件@keydown.delete，通过该事件拿到input的e.target。最后通过判断selectionStart和selectionEnd确定选中的删除的文字是否满足删除的位置条件。如果在不能删除的区间，则阻止删除的事件@keydown.delete。

代码：

<el-input type="textarea" v-model="formData.val" placeholder="请输入"          
    @keydown.delete.native="onDeleteKeyDown"></el-input>

onDeleteKeyDown(e){
    let {selectionStart,selectionEnd}=e.target
    // 如果包含不能删除的区域位置，阻止删除
    if (!(selectionStart>7 || selectionEnd<0)) {
        e.preventDefault()
    }
},

优化：

直接使用上面方法可以实现固定前面7个字符不被修改，但存在bug——不能避免前7个字符之间新增字符。

因此还需要键盘按下事件@keydown，当定位在1-7个字符之间时，阻止事件触发。

<el-input type="textarea" v-model="formData.val" placeholder="请输入"          
    @keydown.delete.native="onDeleteKeyDown" @keydown.native="onKeyDown"></el-input>

......

onKeyDown(e){
   // 如果包含不能删除的区域，禁止
   if (!(e.target.selectionStart>6 || e.target.selectionEnd<0)) {
      e.preventDefault()
   }
},

以上还是存在bug，当正常输入字符发现没得问题，但当使用输入法进行文字字符等输入的时候，还是能正常的输入，因此需要再使用两个事件：@onCompositionStart输入法输入开始事件和@compositionend输入法输入结束事件。

最终优化：

<el-input type="textarea" v-model="formData.val" placeholder="请输入"          
    @keydown.delete.native="onDeleteKeyDown" @keydown.native="onKeyDown"
    @compositionstart.native="onCompositionStart" @compositionend.native="compositionend"></el-input>

            // 输入法键盘字符下不可输入，记录输入的起始位置
            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
                        }
                    })
                }
            },