57 lines
1.2 KiB
Vue
57 lines
1.2 KiB
Vue
<script setup>
|
|
const model = defineModel({ type: String, default: '' })
|
|
|
|
function onInput(e) {
|
|
let val = e.target.value
|
|
|
|
// alles in Großbuchstaben
|
|
val = val.toUpperCase()
|
|
|
|
// nur Buchstaben, Ziffern und Leerzeichen erlauben
|
|
val = val.replace(/[^A-Z0-9 ]/g, '')
|
|
|
|
// ohne Leerzeichen prüfen
|
|
const compact = val.replace(/\s+/g, '')
|
|
|
|
// max 2 Buchstaben + 20 Ziffern
|
|
const letters = compact.slice(0, 2).replace(/[^A-Z]/g, '')
|
|
const digits = compact.slice(2).replace(/[^0-9]/g, '').slice(0, 20)
|
|
|
|
// neu zusammensetzen (z. B. alle 4 Zeichen ein Leerzeichen für Lesbarkeit)
|
|
const formatted = (letters + digits).replace(/(.{4})/g, '$1 ').trim()
|
|
|
|
model.value = formatted
|
|
}
|
|
|
|
function onKeypress(e) {
|
|
const key = e.key
|
|
|
|
// immer erlaubt: Leerzeichen
|
|
if (key === ' ') return
|
|
|
|
const compact = model.value.replace(/\s+/g, '')
|
|
|
|
if (compact.length < 2) {
|
|
// in den ersten 2 Stellen nur Buchstaben
|
|
if (/[A-Za-z]/.test(key)) return
|
|
e.preventDefault()
|
|
return
|
|
}
|
|
|
|
// danach nur Ziffern bis 20 erlaubt
|
|
if (/[0-9]/.test(key) && compact.length < 22) return
|
|
|
|
e.preventDefault()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<input
|
|
maxlength="27"
|
|
type="text"
|
|
:value="model"
|
|
@input="onInput"
|
|
@keypress="onKeypress"
|
|
/>
|
|
</template>
|