Parlons du problème de cliquer sur un espace vide dans uniapp sans perdre le focus

Avec le développement continu des terminaux mobiles et Web, les scénarios d'utilisation des développeurs deviennent de plus en plus diversifiés et ils recherchent constamment des outils et des frameworks de développement plus efficaces. Uniapp est un développement full-stack qui intègre plusieurs plates-formes. Les outils jouent un rôle énorme. rôle dans le domaine du développement multiplateforme. Pendant le développement, nous rencontrons souvent quelques petits problèmes. Par exemple, dans le développement d'uniapp, nous rencontrons souvent le problème de cliquer sur un espace vide sans perdre le focus.

UniApp est un framework de développement multiplateforme basé sur le framework Vue.js. Il a été développé par une équipe de développement indépendante investie par DCloud (J. Lin). Il peut compiler un ensemble de codes dans H5, iOS, Android et autres. Les différents formulaires de candidature tels que les petits programmes, les applications, H5, etc. n'ont pas besoin d'être réécrits et adaptés.

Dans uniapp, nous utilisons généralement la saisie pour obtenir la saisie de l'utilisateur, mais par défaut, lorsque nous cliquons sur la zone en dehors de la saisie, la saisie perdra le focus. Il convient de noter que l'événement click à ce stade ne peut pas être directement lié à des éléments en dehors de l'entrée. Vous devez utiliser le modificateur d'événement @click.stop dans Vue pour empêcher l'événement de bouillonner.

Par exemple, le code suivant est un exemple simple de la façon de cliquer sur un espace vide sans perdre le focus :

<template>
  <div class="container">
    <input type="text" v-model="inputText" @blur="hideKeyboard" />
    <div class="content" @click.stop="hideKeyboard">点击空白区域</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        inputText: '',
      };
    },
    methods: {
      hideKeyboard() {
        //模拟失去焦点操作
        document.activeElement.blur();
      },
    },
  };
</script>

Dans le code ci-dessus, @click.stop est utilisé pour empêcher l'événement de bouillonner, empêchant ainsi l'entrée de perdre le focus en cliquant sur un espace vide.

Il convient de noter que nous devons simuler l'événement flou dans la méthode hideKeyboard. En effet, dans uniapp, nous utilisons la liaison de données bidirectionnelle de vue pour mettre à jour la valeur de la zone de saisie lors de l'événement de flou. est déclenché, en fait L'événement update:xxx est d'abord déclenché pour mettre à jour les données, puis l'événement de flou est déclenché, nous devons donc simuler manuellement l'événement flou pour atteindre l'objectif.

Ce qui précède explique comment utiliser uniapp pour cliquer sur un espace vide sans perdre le focus. Dans le même temps, nous pouvons également perdre notre concentration en cliquant ailleurs en écoutant des événements tactiles sur toute la page. Le code suivant montre comment utiliser les événements tactiles pour réaliser cette fonction :

<template>
  <div class="container" @touchstart="handlePageTouchStart">
    <input type="text" v-model="inputText" @blur="hideKeyboard" />
    <div class="content" @click.stop="hideKeyboard">点击空白区域</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        inputText: '',
      };
    },
    methods: {
      hideKeyboard() {
        //与之前方法相同，不再赘述
      },
      handlePageTouchStart(e) {
        if (document.activeElement.tagName == 'INPUT') {
          e.preventDefault();
          document.activeElement.blur();
        }
      },
    },
  };
</script>

Dans le code ci-dessus, nous lions l'événement touchstart sur toute la page, puis déterminons dans l'événement si l'élément qui déclenche actuellement l'événement est un élément d'entrée. Si tel est le cas, perdez manuellement le focus correspondant.

Résumé

Dans uniapp, il est courant de cliquer sur un espace vide sans perdre le focus. Nous pouvons facilement résoudre ce problème en utilisant @click.stop et en écoutant les événements tactiles. Dans le même temps, dans le développement réel, nous devons choisir, en fonction de la situation réelle, quelle solution utiliser pour obtenir la fonction de cliquer sur un espace vide sans perdre le focus, afin d'obtenir une meilleure expérience 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!