使用原生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
}
})
}
},版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/66294.html
