VueJs - Input blur event with examples

In this tutorial, we will explore the uses of the blur event along with multiple examples.

The blur event is a native browser event introduced in the JavaScript language. It is implemented in every front-end framework according to the framework’s specifications.

This tutorial will help you understanding what the blur event is and how it is implemented in Vue.js applications.

Other versions of this tutorial are also available: [List other versions here if applicable].

• Angular blur event example
• React onBlur event guide example

#Blur event handler in vuejs application

The blur event is triggered when an input element loses focus. It is a DOM event.

The blur event is commonly used in the following elements:

• Individual input elements for validation. For instance, an input type with an email can undergo inline validation when the element loses focus.

• Input elements of various types, including text, textarea, select, checkbox, and radio.

Now, let’s explore an example.

<input v-on:blur="event handler function" />

v-on is an inbuilt directive used to listen to events.

In this context, v-on:blur represents the function that gets executed when the input element loses focus.

The above can be rewritten using the shorthand syntax @event:

<input @blur="event handler function" />

This shorthand is equivalent to v-on:blur and represents the function executed when the input element loses focus.

#Input type blur event example in Vuejs application

The application template includes input element designed for user display.

The @blur event is linked to an event handler declared in JavaScript. The event handler is an anonymous function. The event handler function is defined with the argument $event. The $event is then passed to the event function, allowing retrieval of user-typed data using event.target.value. This process enables seamless data-binding from the view template to the controller JavaScript code. Thus, this example shows how data is passed from the blur event in a Vue.js 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 works with enter key

This is an example demonstrating how input elements function trigger the event with both the blur event and the enter key.

The enter keystroke triggers an action, which can be listened to using the keyup.enter event handler.

<template>
  <input
    id="email"
    v-on:blur="blurEvent('email')"
    v-on:keyup.enter="$event.target.blur()"
  />
</template>

The blurEvent is invoked when the input loses focus or when the enter key is pressed. I have simply logged the entered output using console.log. In some cases, calling it twice (during both blur and the enter key) may pose an issue. To mitigate this problem, call the blur event directly within the keyup.enter event.

<template>
  <input
    id="email"
    v-on:blur="blurEvent('email')"
    v-on:keyup.enter="$event.target.blur()"
  />
</template>

The 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 have learned basic examples of the blur event in a Vue.js application, along with insights into how blur and key events function.