input 태그로 포커스는 주는 등 엘리먼트를 직접 참조해야 할 필요가 있습니다.

Vue3 + TypeScript에서는 ref 속성을 이용해서 가능합니다.

<input ref="code1" class="form-control" type="text" @input="onTextInput($event)" />

참조할 엘리먼트에 ref 속성을 부여한 후 ref 이름과 동일한 ref를 script setup에서 만들어 줍니다.

<script setup lang="ts">
import { ref } from 'vue'

const code1 = ref<HTMLInputElement>()
...

const code1 = ref(null)로도 사용 가능하지만 TypeScript의 인텔리센스를 사용할 수 없습니다. 이후 이벤트 등에서 code1.value?.focus()등으로 사용 가능해 집니다.

const onTextInput = function (event: any) {
    if (event.target.value != '')
        event.target.value = ''

    const c = event.data

    if (c >= 'a' && c <= 'z')
        event.target.value = c.toUpperCase()
    else if (c >= '0' && c <= '9')
        event.target.value = c

    if (event.target == code1.value)
        code2.value?.focus()
...