相关文章推荐
纯真的电脑桌  ·  java set button size ...·  1 年前    · 
考研的紫菜汤  ·  javascript - vue ...·  1 年前    · 
自信的拖把  ·  Group and Sum ...·  1 年前    · 
精彩文章免费看

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

词根校验功能如下:使用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"/>
    
        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);