web-dev-qa-db-ja.com

VueJSは、フィールドにフォーカスがあるときにイベントをトリガーします

VueJSのパスワード変更ページがあり、ユーザーが新しいパスワードフィールドをクリックしたときにのみパスワードポリシーを表示したい。問題は、ページにフォーカスがあるかどうかがわからないことです。

<b-row>
  <b-col>
    <b-form-group id="newPasswrd" label="New Password" :state="statePassword">
      <b-input-group>
        <b-form-input id="newPassword" v-model="passwords.newPassword" ref="newPassword" placeholder="Passwort" type="password" maxlength="60" />
        <p class="password-description"  >Must be at least 8 characters and contain at least two of the following: Upper case, Lower case, special characters or numbers</p>            
      </b-input-group>
    </b-form-group>
  </b-col>
</b-row>

これは、テスト用のページのスクリプト部分にあるものです。

      if (this.$refs.newPassword.focus() == true) console.log("focus");

私の計画は、最終的にこの行を計算に入れ、ブール値を付加して、フォーカスがあるかどうかに応じて、フィールドの下のテキストを表示/非表示にすることです。この条件が書き込まれるメソッドをトリガーすると、コンソールに何も表示されませんが、代わりにフィールドにフォーカスが移動します。これは、私が望んでいることではありません。フィールドにフォーカスがある場合、ブール値を取得するにはどうすればよいですか？

javascriptvue.jsfrontend
5
j0zeft

v-onとnative修飾子を使用してバインドします。

v-on:focus.native="onFocus"

コアメンバーから

ネイティブイベントのコンポーネントへのバインド

3
DigitalDrifter

これをCSSだけで試しましたか？

IE11/Edgeをサポートする必要がない場合：

b-input-group:focus-within>p {
    display: block;
}

IE11/Edgeをサポートする必要がある場合：

input:focus + p {
    display: block;
}

また、ベアボーン要素の代わりにクラスを追加することをお勧めします。

2
Domenik Reitzner

カスタムディレクティブを作成できます

公式のvuejsドキュメントからのサンプル

Vue.directive('focus', {
  // When the bound element is inserted into the DOM...
  inserted: function (el) {
    // Focus the element
    el.focus()
  }
})
0
Marat Badykov