VueJS trigger an event when a field is in focus

user_2385192 0
Viewed 10427

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 computed 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 comes 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?

vue.js frontend javascript
3 Answers
user_95561930

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 recommend adding classes instead of the barebone elements.

user_87459260

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()
  }
})
user_103033430
Related