ホームページ > ウェブフロントエンド > フロントエンドQ&A > vue ページの他の場所をクリックしてもカーソルが消えません

vue ページの他の場所をクリックしてもカーソルが消えません

王林
リリース: 2023-05-05 22:06:07
オリジナル
1241 人が閲覧しました

Vue を使用してページを開発する場合、ページ上の他の場所をクリックしても入力ボックスのカーソルが消えないことがよくあります。この問題は単純に見えますが、適切な対処方法がなければ、ユーザーのインタラクティブ エクスペリエンスに大きな影響を与える可能性があります。この記事では、この問題に対するいくつかの解決策を紹介します。

問題分析

Vue コンポーネントの入力ボックスの v-model 属性をバインドすると、ユーザーが入力ボックスに入力すると、カーソルが入力ボックスに追従します。 ユーザー入力動きます。ただし、ユーザーがページ上の他の領域をクリックした場合、カーソルは消えず、操作がさらに面倒になります。

この問題の根本原因は、ユーザーが入力ボックス以外の領域をクリックしたときにトリガーされるイベントを処理しなかったことです。通常、他の領域をクリックするときは、入力ボックスのブラー イベントを手動でトリガーして、テキスト ボックスのフォーカスを失い、カーソルを消去する必要があります。

解決策

オプション 1: v-on:blur を使用して Vue コンポーネントでブラー イベントをバインドします

Vue コンポーネントで v-on 命令を使用すると、簡単にバインドできますDOM イベントを定義します。ブラー イベントを入力ボックスにバインドできます。ユーザーが別の領域をクリックすると、イベントがトリガーされ、入力ボックスはフォーカスを失い、カーソルが表示されなくなります。

サンプル コード:

<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>
ログイン後にコピー

上記のサンプル コードでは、ブラー イベントを入力ボックスにバインドし、イベント処理関数で入力ボックスのブラー メソッドを呼び出しました。

オプション 2: Vue 命令を使用して要素の動作をカスタマイズする

Vue 命令 (ディレクティブ) は、HTML 要素の動作をカスタマイズするのに役立ちます。これに基づいて、Vue コンポーネントで v-blur 命令をカスタマイズできます。ユーザーが入力ボックス以外の領域をクリックすると、命令がトリガーされ、入力ボックスはフォーカスを失い、カーソルが表示されなくなります。

サンプル コード:

<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>
ログイン後にコピー

上記のサンプル コードでは、blur ディレクティブを定義し、それに関数 documentHandler() をバインドします。この関数では、ドキュメントのクリック イベントをリッスンしており、ユーザーが入力ボックス以外の領域をクリックすると、イベントがトリガーされ、入力ボックスの Blur メソッドが呼び出されます。

概要

オプション 1 を使用するかオプション 2 を使用するかに関係なく、対応するイベントまたは命令を入力ボックスにバインドし、イベント処理関数で入力ボックスの Blur メソッドを呼び出す必要があります。フォーカスを失い、カーソルが消去されます。これにより、ユーザーの操作性が向上し、ユーザーの操作エクスペリエンスが向上します。

以上がvue ページの他の場所をクリックしてもカーソルが消えませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート