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

使用原生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}})}},