ant-design-vue中a-input使用keyup删除不

2021-06-28 本文已影响0人 _信仰zmh

词根校验功能如下：使用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);
        }
    },

ant-design-vue中a-input使用keyup删除不

vue中的删除键事件：

inputType

猜你喜欢

热点阅读