The cursor does not disappear when you click elsewhere on the vue page

When using Vue to develop a page, it is often encountered that the cursor in the input box does not disappear when clicking elsewhere on the page. This problem seems simple, but if there is no correct way to deal with it, it may greatly affect the user's interactive experience. This article will provide some solutions to this problem.

Problem Analysis

When we bind the v-model attribute of an input box in a Vue component, when the user inputs in the input box, the cursor will follow in the input box User input moves. But when the user clicks on other areas on the page, the cursor will not disappear, which will cause a more troublesome operating experience.

The root cause of this problem is that we did not handle the events triggered when the user clicks on the non-input box area. Normally, when clicking on other areas, we need to manually trigger the blur event of the input box so that the text box loses focus and the cursor is eliminated.

Solution

Option 1: Use v-on:blur to bind the blur event in the Vue component

Using the v-on instruction in the Vue component can easily bind Define DOM events. We can bind a blur event to the input box. When the user clicks on another area, the event is triggered and the input box loses focus, thus eliminating the cursor.

Sample code:

<template>
  <div>
    <input v-model="inputValue" v-on:blur="inputBlur">
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ""
    };
  },
  methods: {
    inputBlur() {
      this.$refs.input.blur();
    }
  }
};
</script>

In the above sample code, we bound a blur event to the input box and called the blur method of the input box in the event handling function.

Option 2: Use Vue instructions to customize the behavior of elements

Vue instructions (Directive) can help us customize the behavior of HTML elements. Based on this, we can customize a v-blur instruction in the Vue component. When the user clicks on an area other than the input box, the instruction is triggered and the input box loses focus, thus eliminating the cursor.

Sample code:

<template>
  <div>
    <input v-model="inputValue" v-blur>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ""
    };
  },
  directives: {
    blur: {
      bind: function(el, binding, vnode) {
        function documentHandler(e) {
          if (el.contains(e.target)) {
            return false;
          }
          el.blur();
        }
        el.__vueBlur__ = documentHandler;
        document.addEventListener("click", documentHandler);
      },
      unbind: function(el, binding) {
        document.removeEventListener("click", el.__vueBlur__);
        delete el.__vueBlur__;
      }
    }
  }
};
</script>

In the above sample code, we define a blur directive and bind a function documentHandler() to it. In the function, we listen to the click event of the document. When the user clicks on the non-input box area, the event is triggered and the blur method of the input box is called.

Summary

Whether we use option one or option two, we need to bind the corresponding event or instruction to the input box, and call the blur method of the input box in the event handling function to make it Loses focus, thereby eliminating the cursor. This will improve the friendliness of user interaction and improve user operating experience.

The above is the detailed content of The cursor does not disappear when you click elsewhere on the vue page. For more information, please follow other related articles on the PHP Chinese website!