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.