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()方法聚焦输入框     这样就可以实现只聚焦输入框了。。

上一篇:SQL基础(二)


下一篇:ConcurrentHashMp