Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use onfocusout function in vue.js?

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.

like image 233
dexter Avatar asked Apr 23 '18 05:04

dexter


People also ask

What is @blur in Vuejs?

The blur event executes when an element lost its focus. Onfocusout event occurs after an element loses its focus so the difference between these two are as follows. The focusout bubbles while blur doesn't. To further differentiate between them let's say focus is the opposite of blur.

What is the difference between Blur and Focusout?

The focusout event fires when an element has lost focus, after the blur event. The two events differ in that focusout bubbles, while blur does not. The opposite of focusout is the focusin event, which fires when the element has received focus.

Can I use JavaScript in Vue?

A Vue application/web page is built of components that represent encapsulated elements of your interface. Components can be written in HTML, CSS, and JavaScript without dividing them into separate files.


1 Answers

You're seeking the blur event, which occurs when the <input> loses focus. Use Vue syntax to add a blur-event listener 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)      }    }  })
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>    <div id="app">    <input @blur="handleBlur" placeholder="first name">    <input @blur="handleBlur" placeholder="last name">  </div>
like image 91
tony19 Avatar answered Oct 07 '22 21:10

tony19