フォーカスを失わずに uniapp の空白スペースをクリックする問題について話しましょう

モバイル端末やWeb端末の継続的な開発に伴い、開発者の利用シーンはますます多様化しており、より効率的な開発ツールやフレームワークを常に求めています。Uniappは複数のプラットフォームの開発ツールを統合したフルスタックです。 、クロスプラットフォーム開発の分野で大きな役割を果たしています。開発中に小さな問題が発生することがよくありますが、たとえば、uniapp の開発では、フォーカスを失わずに空白部分をクリックするという問題がよく発生しますが、この記事では、この問題を解決する方法を紹介します。

UniApp は、Vue.js フレームワークに基づくクロスプラットフォーム開発フレームワークです。DCloud (J. Lin) が投資した独立した開発チームによって開発されています。一連のコードを H5、iOS にコンパイルできます。 、Android など。複数のプラットフォーム向けの小さなプログラム、アプリ、H5 などのさまざまなアプリケーション形式を書き直して適合させる必要はありません。

uniapp では、通常、input を使用してユーザー入力を取得しますが、デフォルトでは、入力の外側の領域をクリックすると、入力はフォーカスを失います。このとき、クリック イベントは入力外部の要素に直接バインドできないことに注意してください。イベントのバブリングを防ぐには、vue で @click.stop イベント修飾子を使用する必要があります。

たとえば、次のコードは、フォーカスを失わずに空白スペースをクリックする方法の簡単な例です。

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

上記のコードでは、イベントを防ぐために @click.stop が使用されています。泡が発生しないようにすることで、空のスペースをクリックしたときに入力がフォーカスを失うのを防ぎます。

これは、uniapp で vue のデータ双方向バインディングを使用して入力ボックスの値を更新するためです。これは、blur イベントが発生したときにトリガーされます。実際には、最初に update:xxx イベントがトリガーされてデータが更新され、その後、blur イベントがトリガーされるため、目的を達成するには、手動で焦点外イベントをシミュレートする必要があります。

上記は、uniapp を使用してフォーカスを失わずに空白部分をクリックする方法です。同時に、ページ全体のタッチ イベントをリッスンすることで、他の場所をクリックするとフォーカスを失うこともあります。次のコードは、タッチ イベントを使用してこの機能を実現する方法を示しています。

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

上記のコードでは、ページ全体に touchstart イベントをバインドし、そのイベント内で現在イベントをトリガーしている要素かどうかを判断します。が入力要素である場合、対応するフォーカスを手動で失います。

概要

uniapp では、フォーカスを失わずに空白のスペースをクリックすることが一般的な要件です。 @click.stop を使用し、タッチ イベントをリッスンすることで、この問題を簡単に解決できます。同時に、実際の開発では、より良いユーザーエクスペリエンスを実現するために、フォーカスを失わずに空白部分をクリックする機能を実現するにはどのソリューションを使用するかを実際の状況に基づいて選択する必要があります。

以上がフォーカスを失わずに uniapp の空白スペースをクリックする問題について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。