VueJs - Input blur event with examples
In this tutorial, We are going to learn blur event uses and multiple examples.
blur
event is a browser native event introduced with javascript language. Every front-end framework is implemented in the framework itself.
Let us learn what is blur event, how this event is implemented in vuejs applications.
Other versions available:
Blur event handler in vuejs application
Blur event fired when the input element lost focus. It is a DOM event trigger.
blur event
used in the following elements
Individual Input elements validation, For example, Input type with email can have an inline validation while element lost focus.
- Input all elements
- text
- textarea
- select
- checkbox
- radio
Let us see an example.
<input v-on:blur="event handler function" />
v-on
is an inbuilt directive used to listen to the events
v-on:blur
is the function in this executed while the input element lost focus.
The same above can be rewritten using the shorthand syntax @event
<input @blur="event handler function" />
Input type blur event example in Vuejs application
In the below example,
- application template contains elements to display to the user.
@blur event
attached event handler which is declared in javascript.- function handler is defined with an argument event
- an $event is passed to the event function, and user-typed data can be retrieved using
event.target.value
. - This helps data-binding from the view template to controller javascript code
This is an
example for passing data from blur event in VueJS application
.
<template>
<div class="hello">
<h3>Vuejs Input Blur event example</h3>
<br />
<input type="name" placeholder="name" @blur="blurEventHandler($event)" />
<br />
</div>
</template>
<script>
export default {
name: "InputBlurExample",
data() {
return {
name: "",
};
},
methods: {
blurEventHandler: function (e) {
const name = e.target.value;
console.log(name);
},
},
};
</script>
<style scoped></style>
How Blur event and enter key
It is an example of how input elements work attached with blur event and enter key.
enter key event can be tracked using keyup.enter
event handler
<template>
<input
id="email"
v-on:blur="blurEvent('email')"
v-on:keyup.enter="$event.target.blur()"
/>
</template>
blurEvent is called when input loses focus or the enter key is pressed.
I just logged entered output using console.log
In some cases, This will be an issue calling twice during blur and enter key.
To avoid this issue call blur event directly in keyup.enter event
<template>
<input
id="email"
v-on:blur="blurEvent('email')"
v-on:keyup.enter="$event.target.blur()"
/>
</template>
Following is an event handler function created in the Vue component.
<script>
export default {
name: "InputBlurExample",
data() {
return {
name: "",
};
},
methods: {
blurEvent: function (e) {
const email = e.target.value;
console.log(email);
},
},
};
</script>
Conclusion
In this post, You learned basic blur event examples in the vuejs application and also how blur and key events work.