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