Untitled

<template>
  <div>
    <input
      placeholder="Individual ID (XXX-XXXXXXXX)"
      :value="individualId"
      @input="individualId = maskIndividual($event.target.value)"
      maxlength="12"
    />

    <input
      placeholder="Refugee ID (XXXXXX)"
      :value="refugeeId"
      @input="refugeeId = maskRefugee($event.target.value)"
      maxlength="6"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const individualId = ref('')
const refugeeId = ref('')

function maskIndividual(value) {
  const digits = value.replace(/[^A-Za-z0-9]/g, '').toUpperCase()
  if (digits.length <= 3) return digits
  return digits.slice(0, 3) + '-' + digits.slice(3, 11)
}

function maskRefugee(value) {
  return value.replace(/[^A-Za-z0-9]/g, '').toUpperCase().slice(0, 6)
}
</script>