在 Vue 应用程序中，按下时在输入元素上触发 Key Up 事件。为什么？

Question

这是HTML代码，

<div id="vue-app">
       <h1>data binding</h1>
       <label>Name:</label>
       <input type="text" v-on:keyup="logName" />
    
       <label>Age:</label>
       <input type="text" v-on:keyup="logAge" />
    
</div>

这是脚本：

new Vue({
    el: '#vue-app',

    methods: {
       logName: function() {
          console.log("You entered your name");
       },

       logAge: function() {
           console.log("You entered your age");
       }
    }
});

现在，当我进入“年龄”输入字段时，它会触发“keyup”事件。为什么会这样？

Answer 1

tab 是触发 v-on:keyup 事件的键，请使用 v-on:input 事件代替它：

<div id="vue-app">
       <h1>data binding</h1>
       <label>Name:</label>
       <input type="text" v-on:input="logName" />
    
       <label>Age:</label>
       <input type="text" v-on:input="logAge" />
    
</div>

Answer 2

这是预期的行为，因为任何按键都会触发 keyup 事件。要防止 tab 键触发此事件，您可以尝试：

methods: {
       logName(e) {
          if(e.keyCode === 9) return
          console.log("You entered your name");
       },
       logAge(e) {
           if(e.keyCode === 9) return
           console.log("You entered your age");
       }
    }

在 Vue 应用程序中，按下时在输入元素上触发 Key Up 事件。为什么？

In a Vue app, Key Up Event fired on an input element when tabbed into. Why?

javascript

data-binding

events

keyboard-events

vue.js