vuetify 监听键盘按键

点击回车键触发登录事件

1. 创建钩子函数 created（） ，调用事件

created(){ this.keyupSubmit(); },

 

 

2.事件中监听回车键

keyupSubmit(){ document.onkeydown = e =>{ let _key = window.event.keyCode; if(_key === 13){ this.login(); } } },

 

 

点击tab键 切换input输入框

注：点击tab键会聚焦页面上的按钮、复选框、浏览器栏等

问：那么如何只选择输入框

 

1.首先在输入框中设置tabindex，tabindex = 0 || tabindex = 1 设置tab键聚焦顺序，负数则不聚焦

 

<v-text-field
  ref ="lbj02"
  tabindex="3"
  v-model="vcode"
  :rules="[rules.required]"
  label="登录验证码"
  placeholder="请输入验证码"
  color="#00f"
  prepend-inner-icon="mdi-shield-alert-outline"
  required
>

 

 

2.在最后一个输入框设置失去焦点（@blur）触发事件 focusRef()

   

<v-text-field
   @keypress.native.tab= "focusNextInput(2)"
  class="class1"
  ref ="lbj02"
  tabindex="3"
  v-model="vcode"
  :rules="[rules.required]"
  label="最后一个输入框"
  placeholder="最后一个输入框"
  color="#00f"
  @blur = "focusRef()"
  prepend-inner-icon="mdi-shield-alert-outline"
  required
>

 

 

3. focusRef 方法中设置选择第一个输入框聚焦

  

focusRef(){ this.$refs.lbj.focus(); },

 

注：lbj 是第一个输入框的ref值， focus()方法聚焦输入框

 

 

这样就可以实现只聚焦输入框了。。