Focus Directive

The v-focus directive is used to automatically focus an input element when the page is loaded or a component is created. It is also used to focus an element when it is dynamically added to the DOM (using v-if or v-for).

Usage

<input v-focus />

Focus on Mount

The v-focus directive is used to focus an element when the page is loaded or a component is created. It is also used to focus an element when it is dynamically added to the DOM (using v-if or v-for).

<template>
  <input v-focus />
</template>

Focus Lock

The v-focus:lock directive is used to lock the focus to an element. This is useful when you want to prevent the user from tabbing out of an input element.

<template>
  <input v-focus:lock />
</template>

Lock on Focus

The v-focus:lockonFocus directive is used to lock the focus to an element when it is focused. This is useful when you want to prevent the user from tabbing out of an input element.

<template>
  <input v-focus:lockonFocus />
</template>

Conditional Focus Lock

The v-focus directive can be used to conditionally focus an element. This is useful when you want to focus an element only when a certain condition is met.

if count is odd, input will be focused and locked, otherwise input will not be

View Code

<script setup>
import { ref } from "vue";
const count = ref(0);
</script>
<template>
  <div>
    <div class="space-y-2">
      <div>
        <p>
          if count is odd, input will be focused and locked, otherwise input
          will not be
        </p>
        <div>
          <input
            type="number"
            v-focus:lockonCondition="count % 2 === 1"
            v-model="count"
            class="p-2 color-pink border w-full max-w-xs rounded-lg focus:outline-none ring-2 focus:ring-blue-600 focus:border-transparent"
            :placeholder="count % 2 === 1 ? 'Focus' : 'Not Focus'"
          />
        </div>
      </div>
      <div class="w-full">
        <button
          @click="count++"
          class="px-2 py-1 w-full bg-blue-500 text-white rounded-lg max-w-xs"
        >
          count+
        </button>
      </div>
    </div>
  </div>
</template>
<style scoped></style>

Arguments

The v-focus directive accepts three arguments lockonFocus, lock and lockonCondition.

Modifiers

The v-focus directive does not accept any modifiers.

Source Code

export const vFocus = {
  mounted(el, binding) {
    handleFocus(el, binding);
  },
  updated(el, binding) {
    handleFocus(el, binding);
  },
};

function handleFocus(el, binding) {
  if (binding.arg === "lockonFocus") {
    el.onblur = () => el.focus();
  } else if (binding.arg === "lock") {
    el.focus();
    el.onblur = () => el.focus();
  } else if (binding.arg === "lockonCondition") {
    if (binding.value) {
      el.focus();
      el.onblur = () => el.focus();
    } else {
      // remove the event handler when the binding value changes
      el.onblur = null;
      el.blur();
    }
  } else {
    el.focus();
  }
}