53

I want to call a function as soon as the cursor moves from one text box to next. The function call should be made when a tab is clicked or after the expected entries are entered and moved to next.

0

1 Answer 1

98

Use the v-on directive to add an event listener for blur or focusout on the <input>:

v-on:EVENT_NAME="METHOD"

Example:

<input v-on:blur="handleBlur">

Or shorter syntax:

@EVENT_NAME="METHOD"

Example:

<input @blur="handleBlur">

new Vue({
  el: '#app',
  methods: {
    handleBlur(e) {
      console.log('blur', e.target.placeholder)
    },
    handleFocusout(e) {
      console.log('focusout', e.target.placeholder)
    }
  }
})
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>

<div id="app">
  <fieldset>
    <legend>blur</legend>
    <input @blur="handleBlur" placeholder="first name">
    <input @blur="handleBlur" placeholder="last name">
  </fieldset>
  <fieldset>
    <legend>focusout</legend>
    <input @focusout="handleFocusout" placeholder="email">
    <input @focusout="handleFocusout" placeholder="phone">
  </fieldset>
</div>

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.