Question

我有一个使用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");

我的计划是最终将此行放入计算所得的值中，并为其附加一个bool值，以查看/隐藏字段下方的文本，具体取决于其是否处于焦点位置。发生的情况是，当我触发编写此条件的方法时，控制台中什么也没得到，但是焦点却集中在该字段上，这不是我想要的。如果该字段处于焦点位置，我应该怎么做才能获得布尔值？

Answer 1

您是否仅使用CSS尝试过此操作？

如果您不必支持IE11 / Edge：

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

如果必须支持IE11 / Edge：

input:focus + p {
    display: block;
}

我还建议添加类而不是准系统元素。

Answer 2

结合使用v-on和native修饰符：

v-on:focus.native="onFocus"

From a Core Member

Binding Native Events to Components

Answer 3

您可以创建自定义指令

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

当字段聚焦时，VueJS触发事件

3 个答案: