VueJs - Input blur event with examples

In this tutorial, We are going to learn blur event uses and multiple examples.

blur event is an browser native event introduced with javascript language, Every front end framework implemented in the framework itself.

Let us learn what is blur event, how this event is implemented in in vuejs applications

Other versions available:

• Angular blur event example

• React onBlur event guide example

Blur event handler in vuejs application

BLur event is fired when input element lost focus. It is an DOM event trigger.

blur event` used in following elements

Individual Input elements validation, For example, Input type with email can have a 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 a in bulitn directive used to listen the events v-on:blur the function in this executed while input element lost focus.

The same above can be rewritten using 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 user.
• @blur event attached event handler which is declared in javascript.
• function handler is defined with an argument event
• an $event is passed to event function, and user typed data can be retrieved using event.target.value.
• This helps data binding from 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

This is an example how input elements works 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 while input lost focus or 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 vue component

<script>
export default {
  name: "InputBlurExample",
  data() {
    return {
      name: "",
    };
  },
  methods: {
    blurEvent: function (e) {
      const email = e.target.value;
      console.log(email);
    },
  },
};
</script>

Conclusion

On this post, You learned basic blur event example in vuejs application and also how blur and key event works.