需求：通过使用键盘enter键，实现tab键对表单元素的切换。通过给每个控件添加class="test"获取需要切换的控件，虽实现功能需求，但仍有很大的优化空间。
- 封装
keydown.js文件
export function getKeyDown(className){
//当前页面监视键盘输入
document.onkeydown = function(e) {
if(e.keyCode === 13){
// 阻止文本框的换行
if(window.event){
window.event.returnValue = false;
}else{
e.preventDefault(); //for firefox
}
// 标记当前组件为true
if(e.target.tagName === 'INPUT'){
e.target.autofocus = true;
}else if(e.target.tagName === 'TEXTAREA'){
e.target.autofocus = true;
}else{
e.target.firstChild.autofocus = true;
}
// 获取所有需要定位的组件
let arr = document.querySelectorAll("."+className);
let index2 = -1;
arr.forEach((i,index) => {
if(i.querySelectorAll("input")[0]){
if(i.querySelectorAll("input")[0].autofocus){
index2 = index;
}
}else if(i.querySelectorAll("textarea")[0]){
if(i.querySelectorAll("textarea")[0].autofocus){
index2 = index;
}
}else{
// 暂无其他
}
})
// 超出返回第一个组件
if(index2 + 1 >= arr.length){
index2 = -1;
}
// 聚焦到下一个组件中
if(arr[index2 + 1].querySelectorAll("input")[0]){
if(arr[index2 + 1].querySelectorAll("input")[0].type === 'hidden'){
arr[index2 + 1].querySelectorAll("input")[0].parentElement.focus();
}else{
arr[index2 + 1].querySelectorAll("input")[0].focus();
}
}else if(arr[index2 + 1].querySelectorAll("textarea")[0]){
arr[index2 + 1].querySelectorAll("textarea")[0].focus();
}else{
// 暂无其他
}
// 重置当前组件为false
if(e.target.tagName === 'INPUT'){
e.target.autofocus = false;
}else if(e.target.tagName === 'TEXTAREA'){
e.target.autofocus = false;
}else{
e.target.firstChild.autofocus = false;
}
}
}
}
- 组件中引用
<template>
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
<FormItem label="Name" prop="name">
<Input class="test" v-model="formValidate.name" placeholder="Enter your name"></Input>
</FormItem>
<FormItem label="E-mail" prop="mail">
<Input class="test" v-model="formValidate.mail" placeholder="Enter your e-mail"></Input>
</FormItem>
<FormItem label="City" prop="city">
<Select class="test" v-model="formValidate.city" placeholder="Select your city">
<Option value="beijing">New York</Option>
<Option value="shanghai">London</Option>
<Option value="shenzhen">Sydney</Option>
</Select>
</FormItem>
<FormItem label="Date">
<Row>
<Col span="11">
<FormItem prop="date">
<DatePicker class="test" type="date" placeholder="Select date" v-model="formValidate.date"></DatePicker>
</FormItem>
</Col>
<Col span="2">-</Col>
<Col span="11">
<FormItem prop="time">
<TimePicker class="test" type="time" placeholder="Select time" v-model="formValidate.time"></TimePicker>
</FormItem>
</Col>
</Row>
</FormItem>
<FormItem label="Hobby" prop="interest">
<CheckboxGroup v-model="formValidate.interest">
<Checkbox class="test" label="Eat"></Checkbox>
<Checkbox class="test" label="Sleep"></Checkbox>
<Checkbox class="test" label="Run"></Checkbox>
<Checkbox class="test" label="Movie"></Checkbox>
</CheckboxGroup>
</FormItem>
<FormItem label="Gender" prop="gender">
<RadioGroup v-model="formValidate.gender">
<Radio class="test" label="male">Male</Radio>
<Radio class="test" label="female">Female</Radio>
</RadioGroup>
</FormItem>
<FormItem label="Switch">
<i-switch class="test" v-model="formValidate.switch" size="large">
<span slot="open">On</span>
<span slot="close">Off</span>
</i-switch>
</FormItem>
<FormItem label="Desc" prop="desc">
<Input class="test" v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
</FormItem>
<FormItem>
<Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
<Button @click="handleReset('formValidate')">Reset</Button>
</FormItem>
</Form>
</template>
<script>
import { getKeyDown } from '@/libs/keydown'
export default {
data () {
return {
formValidate: {
name: '',
mail: '',
city: '',
gender: '',
interest: [],
date: '',
time: '',
switch: true,
desc: ''
},
ruleValidate: {
name: [
{ required: true, message: 'The name cannot be empty', trigger: 'blur' }
],
mail: [
{ required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
{ type: 'email', message: 'Incorrect email format', trigger: 'blur' }
],
city: [
{ required: true, message: 'Please select the city', trigger: 'change' }
],
gender: [
{ required: true, message: 'Please select gender', trigger: 'change' }
],
interest: [
{ required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
{ type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' }
],
date: [
{ required: true, type: 'date', message: 'Please select the date', trigger: 'change' }
],
time: [
{ required: true, type: 'string', message: 'Please select time', trigger: 'change' }
],
desc: [
{ required: true, message: 'Please enter a personal introduction', trigger: 'blur' },
{ type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur' }
]
}
}
},
methods: {
handleSubmit (name) {
this.$refs[name].validate((valid) => {
if (valid) {
this.$Message.success('Success!');
} else {
this.$Message.error('Fail!');
}
})
},
handleReset (name) {
this.$refs[name].resetFields();
}
},
created() {
let that = this
getKeyDown('test');
}
}
</script>
