I have a password change page with VueJS, and I want to view the password policy only when the user clicks into the new password field. The problem is that I can't find if the page is in focus..

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

and this is what I have in the script part of the page for testing:

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

My plan is to ultimately put this line in a puted and attach a bool value to it to view/hide the text below the field depending on whether if it is in focus. What happens is that I get nothing in the console when I trigger the method where this condition is written, but the focus es to the field instead, which is not what I want. what should I do to get a bool value if the field is in focus?

I have a password change page with VueJS, and I want to view the password policy only when the user clicks into the new password field. The problem is that I can't find if the page is in focus..

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

and this is what I have in the script part of the page for testing:

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

My plan is to ultimately put this line in a puted and attach a bool value to it to view/hide the text below the field depending on whether if it is in focus. What happens is that I get nothing in the console when I trigger the method where this condition is written, but the focus es to the field instead, which is not what I want. what should I do to get a bool value if the field is in focus?

• javascript
• vue.js
• frontend

• 1 How about an onfocus event? w3schools./jsref/event_onfocus.asp – Roberto Zvjerković Commented Sep 3, 2018 at 9:38
• 2 Try with v-on:focus. – Ankit Agarwal Commented Sep 3, 2018 at 9:39

3 Answers 3

Bind using v-on with the native modifier:

v-on:focus.native="onFocus"

From a Core Member

Binding Native Events to Components

Have you tried this with css only?

If you don't have to support IE11/Edge:

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

If you have to support IE11/Edge:

input:focus + p {
    display: block;
}

I would also remend adding classes instead of the barebone elements.

You can create custom directive

Sample from official vuejs docs

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