利用v-focus-next指令实现Form表单回车后聚焦下一个元素

简介

v-focus-next是一个Vue指令，使用该指令后，在表单的某个元素中输入回车符，可以自动聚焦到下一个表单元素，避免了用户通过鼠标来回选中表单元素，大大提升了表单填写的效率和用户体验。

《演示效果》

v-focus-next的使用非常简单。

只需要为某个Dom或Vue组件（如div、form、ElForm等）绑定v-focus-next指令，则该Dom下的所有input/textarea自动支持回车聚焦功能，无需任何其他配置。

支持以下特性：

  • 默认会将所有input/textarea加入回车聚焦功能，也可通过指定className等方式，将部分表单元素支持回车聚焦。
  • 支持首个表单元素自动聚焦
  • 支持任意普通Dom元素和Vue组件
  • 自动过滤掉disable的元素及type为hidden、radio、checkbox、file、submit、reset的元素
  • 支持vue2/3

使用

安装

npm install v-focus-next

项目中引入

通过use方式，引入该指令中间件。

Vue3示例：

import { createApp } from 'vue'
import App from './App.vue'
import vFocusNext from "v-focus-next";

let app = createApp(App)
app.use(vFocusNext)  //通过中间件方式引入指令
app.mount('#app')

Vue2示例：

import Vue from 'vue'
import App from './App.vue'
import vFocusNext from "v-focus-next";

Vue.use(vFocusNext); //通过中间件方式引入指令

new Vue({
  render: h => h(App),
}).$mount('#app')

示例1

只需为某个父元素增加v-focus-next指令，则其中所有表单元素就拥有了回车聚焦功能。