关于javascript:利用vfocusnext指令实现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 指令，则其中所有表单元素就领有了回车聚焦性能。

 <div v-focus-next>
    <input placeholder="输出回车主动聚焦下一行"/>
    <input/>
    <input/>
    <input/>
    <input/>
    <textarea  />
</div>

Vue 组件也是一样的，如为 el-form 增加 v -focus-next 指令。

<el-form v-focus-next >
    <el-form-item label="名称">
        <el-input v-model="form.name" id="name" />
    </el-form-item>
    <el-form-item label="年龄">
        <el-input v-model="form.age" id="age" disabled />
    </el-form-item>
 </el-form>

示例 2：指定参加回车聚焦的元素

或者你不想所有表单元素都参加回车聚焦，比方只想让所有设置了 class 为 ’test’ 的元素参加回车聚焦，只须要设置 v-focus-next=”‘.test'”，可设为 querySelectorAll 反对的参数模式。

<div v-focus-next="'.test'">
    <input class="test"/>
    <input />
    <input class="test"/>
</div>

示例 3：主动聚焦首个元素

只需设置 v -focus-next.autoFocus 即可。

<div v-focus-next.autoFocus>
    <input />  // 主动聚焦
    <input />
    <input />
</div>

欢送试用点赞

欢送大家用到本人的我的项目中，让表单一路 Next。
源码：https://github.com/501351981/v-focus-next