A Vue 3 composable to convert enter key to tab key. Especially useful when inputting forms using a numpad.

This is a fork of ajomuch92/vue-enter-to-tab and has been converted from a Mixin to a Vue3 composable. It also features new options.

Requires Vue >=3.3 and Node >=18.

# npm
npm i --save vue3-enter-to-tab
# yarn
yarn add vue3-enter-to-tab

<template>
  <div ref="form"></div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useEnterToTab } from 'vue3-enter-to-tab'

// Get ref to the parent element
const form = ref<HTMLElement | null>(null)

useEnterToTab(form)
</script>

See documentation below.

<template>
  <div ref="form">
    <input />
    <input v-prevent-enter-tab />
  </div>
</template>

<script setup lang="ts">
import { useEnterToTab } from 'vue3-enter-to-tab'
import { ref } from 'vue'

const form = ref<HTMLElement | null>(null)
const { vPreventEnterTab, isEnterToTabEnabled } = useEnterToTab(form, {
  autoClickButton: false,
  initialState: false,
})
// Read and change the status using that ref
isEnterToTabEnabled.value = true
</script>

The code has not been tested yet and it is recommended to use the composition API instead.

<template>
  <div ref="form"></div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useEnterToTab } from 'vue3-enter-to-tab'

export default defineComponent({
  setup() {
    useEnterToTab(this.$refs.form)
  },
})
</script>

Type: HTMLElement | null

The parent element. This is where the event listener will be attached.

Enter key will be converted for all children input of this element, except for those with the v-prevent-enter-tab directive and not including <textarea>.

interface UseEnterToTabOptions {
  autoClickButton?: boolean
  initialState?: boolean
}

If the next element is a button, it will be clicked. Activating this has the advantage that it's not necessary to press enter twice to click a button (often to submit the form).

Disable this if you don't want to click buttons automatically and instead just focus them like other inputs.

Default: true

Initial state of the function.

Default: true

Directive to use in those inputs you want to avoid use enter as tab. Inputs with this directive will act as normal when pressing enter.

Ref to read and change the status of the function.