词根校验功能如下：使用div作为一个容器来存放所有的词根，所有的词根使用一个rootList数组进行v-for遍历生成一个个小的div，最后面跟一个input输入框。当输入框输入文本，点击回车或失焦或长时间未输入，将往rootList内push一个新词根。
需求：删除词根，之前只能通过点击每个词根尾部的x号进行删除。新加使用键盘的删除键来进行删除。
解决：input监听删除键事件，当input框内容为空的时候，删除前一个词根，即可达到通过键盘来删除词根的目的。
<a-input
style="font-size: 1.3em; position: relative; top: 1.5px;"
:style="'width: ' + inputText.length * 10 + 'px'"
:value="inputText"
@keyup.delete="onKeyUpDelete"
@change="onChange"
@pressEnter="onPressEnter"
@blur="onInputBlur"/>
onKeyUpDelete(event){
if(event.keyCode!=8){
this.$message.info('暂不支持delete键删除，建议使用backspace键删除。');
return;
}
if(!event.target.value&&this.labelRoots&&this.labelRoots.length>0){
this.labelRoots.splice(this.labelRoots.length-1);
this.doCheckRoots();
}
},
onChange(value){
var self = this;
this.inputText = value.target.value;
if(this.inputText.indexOf("_") > -1){
this.inputText.split("_").map(function(item){
if(item){
var label = {eabbreviation:'',oldename: item,ename: item, exist: true, showPop: false, newAdded: false,nopass:false};
self.labelRoots.push(label);
self.doCheckRoots();
}
})
this.inputText = "";
}else{
this.requestRootList(value.target.value);
}
},
vue中的删除键事件：
@keyup.delete 删除的时候，一定要先判断下input的内容为空了，才可以删除前一个词根，否则优先删除input内部的文本。
@keyup.delete实际上对应的是两个键，一个是delete，一个是backspace。其中delete键对input没有任何影响，但backspace键会去删除input中的字符。
- 针对delete键兼容处理：
简单点就是在vue中使用@keyup.delete，通过keyCode把delete键排除掉。 - delete的keyCode是46。
- backspace的keyCode是8。
if(event.keyCode != 8 ){
this.$message.info('暂不支持delete键删除，建议使用backspace键删除。');
return;
}
或者改写delete键
if(event.keyCode != 8 ){
if(input框的文本长度>0){
就把文本最后一个字符删掉，然后再设置给input
}else{
if(删除前只有一个字符){
就把前一个词根删掉
}else{
还是删除文本的最后一个字符
}
}
return;
}
问题：当input中只剩下一个字符的时候，点击删除键，就会把最后一个字符删除，同时会把前一个词根也删除掉。实际上想要的效果是把input内容删空后再次删才可删前面的词根。
发现：input的change事件和keyup.delete事件，先后顺序是先触发change，然后再触发keyup。这就导致上面的情况的发生，删除最后一个字符的时候，把前一个词根也跟着删了
inputType
在input的change事件中，可以通过event.inputType得知当前是添加文本还是删除文本等等。
https://developer.mozilla.org/zh-CN/docs/Web/API/InputEvent/inputType
一个 DOMString 对象，包含所做输入的类型。有许多可能的值，例如insertText、deleteContentBackward、insertFromPaste和formatBold。
当添加文本的时候，是insertText，删除文本的时候是deleteContentBackward
onChange(value){
// console.log(value.inputType);
var self = this;
// if(value.inputType=='deleteContentBackward'&&(this.inputText&&this.inputText.length==1)&&!value.target.value){
// this.deleteRoots = true;
// }else{
// this.deleteRoots = false;
// }
this.inputText = value.target.value;
if(this.inputText.indexOf("_") > -1){
this.inputText.split("_").map(function(item){
if(item){
var label = {eabbreviation:'',oldename: item,ename: item, exist: true, showPop: false, newAdded: false,nopass:false};
self.labelRoots.push(label);
self.doCheckRoots();
}
})
this.inputText = "";
}else{
this.requestRootList(value.target.value);
}
},
change事件有inputType，keyup没有inputType
判断如果是删除，且删除前是一个字符，删除后是0个字符，在keyup事件中去删除词根，这个想法不行。
最后的解决办法是：统一使用keydown事件，keydown早于keyup，不过要做个专门的判断是backspace键。
<div style="display: inline-block;min-width:30px;" v-if="editable">
<!-- <a-button @click='getConfirmRoots'>查看要创建的s词根测试</a-button> -->
<a-input
style="font-size: 1.3em; position: relative; top: 1.5px;"
:style="'width: ' + inputText.length * 10 + 'px'"
@keydown="onKeyUpDelete"
:value="inputText"
@change="onChange"
@pressEnter="onPressEnter"
@blur="onInputBlur"/>
</div>
onKeyUpDelete(event){
if(event.keyCode!=8){
// this.$message.info('请使用Backspace键删除，Delete键暂不支持删除。');
//后期追加delete键删除的时候 删除先input的内容，然后再删除前边的词根，模拟backspace
return;
}
//优先删除input内部的文本，删完文本再删词根
// if(!event.target.value&&this.labelRoots&&this.labelRoots.length>0){
if(!this.inputText&&!event.target.value&&this.labelRoots&&this.labelRoots.length>0){
this.labelRoots.splice(this.labelRoots.length-1);
//删除词根的时候 会导致词根英文名发生变化 需要同步更新value、seq数据属性
this.doCheckRoots();
}
},
onChange(value){
// console.log(value.inputType);
var self = this;
// if(value.inputType=='deleteContentBackward'&&(this.inputText&&this.inputText.length==1)&&!value.target.value){
// this.deleteRoots = true;
// }else{
// this.deleteRoots = false;
// }
this.inputText = value.target.value;
if(this.inputText.indexOf("_") > -1){
this.inputText.split("_").map(function(item){
if(item){
var label = {eabbreviation:'',oldename: item,ename: item, exist: true, showPop: false, newAdded: false,nopass:false};
self.labelRoots.push(label);
self.doCheckRoots();
}
})
this.inputText = "";
}else{
this.requestRootList(value.target.value);
}
},
网友评论