Let’s talk about the problem of clicking on a blank space in uniapp without losing focus

With the continuous development of mobile and web terminals, developers' usage scenarios are becoming more and more diverse, and they are also constantly looking for more efficient development tools and frameworks. Uniapp is a full-stack that integrates multiple platforms development tools, playing a huge role in the field of cross-platform development. During development, we often encounter some small problems. For example, in uniapp development, we often encounter the problem of clicking on a blank space without losing focus. This article will introduce how to solve this problem.

UniApp is a cross-platform development framework based on the Vue.js framework. It is developed by an independent development team invested by DCloud (J. Lin). It can compile a set of codes into H5, iOS, Android, etc. Different application forms such as small programs, apps, and H5 for multiple platforms do not need to be rewritten and adapted.

In uniapp, we usually use input to obtain user input, but by default, when we click on the area outside the input, the input will lose focus. It should be noted that the click event at this time cannot be directly bound to elements outside the input. You need to use the @click.stop event modifier in vue to prevent the event from bubbling.

For example, the following code is a simple example of how to click on a blank space without losing 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>

In the above code, @click.stop is used to prevent the event from bubbling, so that in Prevents the input from losing focus when clicking on an empty space.

It should be noted that we need to simulate the out-of-focus event in the hideKeyboard method. This is because in uniapp, we use vue's data two-way binding to update the value of the input box, which is triggered when the blur event When, the update:xxx event is actually triggered first to update the data, and then the blur event is triggered, so we need to manually simulate the out-of-focus event to achieve the goal.

The above is how to use uniapp to click on a blank space without losing focus. At the same time, we can also lose focus when clicking elsewhere by listening to touch events on the entire page. The following code shows how to use touch events to achieve this function:

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

In the above code, we bind the touchstart event on the entire page, and then determine in the event whether the element that currently triggers the event is an input element. , if so, manually lose the corresponding focus.

Summary

In uniapp, it is a common requirement to click on a blank space without losing focus. We can easily solve this problem by using @click.stop and listening for touch events. At the same time, in actual development, we need to choose based on the actual situation, which solution to use to achieve the function of clicking on a blank space without losing focus, in order to achieve a better user experience.

The above is the detailed content of Let’s talk about the problem of clicking on a blank space in uniapp without losing focus. For more information, please follow other related articles on the PHP Chinese website!