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.
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.
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.
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With