vue-next-focus

Automatically add enter key jump responses to your input

Support input textarea and other third-party library input

Import

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

const app = createApp( App )

app.use( vue_next_focus )
app.mount( '#app' )

Usage

All but the last input automatically has the enter key to jump to the next input

<div v-next-focus>
        <input type="text" />
        <input type="text" />
        <input type="text" />
        <input type="text" />
        <input type="text" />
</div>

support for element-plus, other framing theories also support it

 <div v-next-focus>
        <el-input type="text" />
        <el-input type="text" />
        <el-input type="text" />
        <el-input type="text" />
        <el-input type="text" />
</div>

This is also valid for a single input

<input type="text" v-next-focus/>
<input type="text" />

Temporary skip support

<div v-next-focus>
        <input type="text" />
        <input type="text" focus-skip/> <!-- This element will be skipped -->
        <input type="text" />
        <input type="text" />
        <input type="text" />
</div>

Exact jump

<div v-next-focus>
        <input type="text" />
        <input type="text" focus-jump="aaa"/> <!-- Will jump to the last input -->
        <input type="text" />
        <input type="text" />
        <input type="text" focus-id="aaa"/>
</div>

<input type="text" />
<input type="text" v-next-focus="'aaa'"/> <!-- Will jump to the last input -->
<input type="text" />
<input type="text" />
<input type="text" focus-id="aaa"/>

textarea

In order not to affect the enter response of a textarea, the library will handle the textarea when it encounters a textarea. You need to hold down ctrl and then trigger enter. Of course, we've added hints for each Textarea's placeholder property.

Component library

There might be some problems in specific third-party component libraries, but these are usually not problems with vue-next-focus. There are two common problems:

• Third-party components use non-element root nodes, and due to the limitations of the Vue framework itself, the directives cannot take effect. This is a limit of Vue itself. Of course, you can also think that the third-party components have not taken into account. I personally clearly recognize this as a design flaw in Vue. I can almost know how the Vue team made a foolish adherence to the so-called design principles, even though the foolish adherence can lead to inconvenience and loss of flexibility. In this case, a clear warning will be printed on the console.
• If focus-skip fails or properties like focus-id fail, it is very likely that some attributes on the components have been automatically deleted by the third-party component. This is purely a problem with the component library.

The solutions to the above problems are as follows:

• For components that do not support directives, you can wrap the components with div, and then write the directives on the div, or write the directives on the common parent element.
• For the problem that focus-skip fails, you can only use div to wrap the component and then write the property on the div.