Vue を使用してページを開発する場合、ページ上の他の場所をクリックしても入力ボックスのカーソルが消えないことがよくあります。この問題は単純に見えますが、適切な対処方法がなければ、ユーザーのインタラクティブ エクスペリエンスに大きな影響を与える可能性があります。この記事では、この問題に対するいくつかの解決策を紹介します。
Vue コンポーネントの入力ボックスの v-model 属性をバインドすると、ユーザーが入力ボックスに入力すると、カーソルが入力ボックスに追従します。 ユーザー入力動きます。ただし、ユーザーがページ上の他の領域をクリックした場合、カーソルは消えず、操作がさらに面倒になります。
この問題の根本原因は、ユーザーが入力ボックス以外の領域をクリックしたときにトリガーされるイベントを処理しなかったことです。通常、他の領域をクリックするときは、入力ボックスのブラー イベントを手動でトリガーして、テキスト ボックスのフォーカスを失い、カーソルを消去する必要があります。
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>
上記のサンプル コードでは、ブラー イベントを入力ボックスにバインドし、イベント処理関数で入力ボックスのブラー メソッドを呼び出しました。
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 サイトの他の関連記事を参照してください。