Vue3-enter-to-tab NPM

`vue3-enter-to-tab` composable

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.

Install

Requires Vue >=3.3 and Node >=18.

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

Usage

Minimal example with composition API

<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>

Full example

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>

Minimal example with options API

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>

API: `useEnterToTab(element, options?)`

Input `element`

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>.

Input `options`

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

autoClickButton

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