Le curseur ne disparaît pas lorsque vous cliquez ailleurs sur la page vue

Lorsque nous utilisons Vue pour développer des pages, nous rencontrons souvent des situations où le curseur dans la zone de saisie ne disparaît pas lorsque l'on clique ailleurs sur la page. Ce problème semble simple, mais s'il n'existe pas de manière correcte de le résoudre, il peut grandement affecter l'expérience interactive de l'utilisateur. Cet article fournira quelques solutions à ce problème.

Analyse du problème

Lorsque nous lions l'attribut v-model d'une zone de saisie dans un composant Vue, lorsque l'utilisateur saisit dans la zone de saisie, le curseur se déplace dans la zone de saisie en suivant le contenu saisi par l'utilisateur. Mais lorsque l'utilisateur clique sur d'autres zones de la page, le curseur ne disparaît pas, ce qui entraînera une expérience de fonctionnement plus gênante.

La cause première de ce problème est que nous n'avons pas géré les événements déclenchés lorsque l'utilisateur clique sur la zone de non-saisie. Normalement, lorsque nous cliquons sur d'autres zones, nous devons déclencher manuellement l'événement de flou de la zone de saisie afin que la zone de texte perde le focus et que le curseur soit éliminé.

Solution

Option 1 : utilisez v-on:blur pour lier l'événement flou dans le composant Vue

L'utilisation de la directive v-on dans le composant Vue peut facilement lier les événements DOM. Nous pouvons lier un événement de flou à la zone de saisie Lorsque l'utilisateur clique sur une autre zone, l'événement est déclenché et la zone de saisie perd le focus, éliminant ainsi le curseur.

Exemple de 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>

Dans l'exemple de code ci-dessus, nous avons lié un événement de flou à la zone de saisie et appelé la méthode de flou de la zone de saisie dans le gestionnaire d'événements.

Option 2 : Utiliser les instructions Vue pour personnaliser le comportement des éléments

Les instructions Vue (Directive) peuvent nous aider à personnaliser le comportement des éléments HTML. Sur cette base, nous pouvons personnaliser une instruction v-blur dans le composant Vue Lorsque l'utilisateur clique sur une zone autre que la zone de saisie, l'instruction est déclenchée et la zone de saisie perd le focus, éliminant ainsi le curseur.

Exemple de 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>

Dans l'exemple de code ci-dessus, nous définissons une directive de flou et y lions une fonction documentHandler(). Dans la fonction, nous écoutons l'événement click du document Lorsque l'utilisateur clique sur la zone sans zone de saisie, l'événement est déclenché et la méthode de flou de la zone de saisie est appelée.

Résumé

Que nous utilisions l'option un ou l'option deux, nous devons lier l'événement ou l'instruction correspondant à la zone de saisie, et appeler la méthode flou de la zone de saisie dans la fonction du gestionnaire d'événements pour lui faire perdre le focus et éliminer le curseur. Cela améliorera la convivialité de l'interaction avec l'utilisateur et améliorera l'expérience d'exploitation de l'utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!