vue3 에서 input에 포커스 이동하기 - vuejs, javascript

vue 화면에서 특정 input으로 포커스 이동하기

---

html

<div class="m_radio fcolumn">
  <input type="radio" name="withdinfo" id="withdinfo1" value="voc" v-model="member.withdchk">
  <label for="withdinfo1">VOC</label>
  <div class="fcoldiv">
    <input type="radio" name="withdinfo" id="withdinfo2" value="etc" v-model="member.withdchk" @change="memberwithdcmt.focus()">
    <label for="withdinfo2">기타</label>
    <input type="text" id="withdinfo2" class="etc_ip" :class="{ipno: member.withdchk === 'voc'}" ref="memberwithdcmt" v-model="member.withdcmt">
  </div>
</div>

<!--
위는 DOM에 직접 설정해서 포커스 이동
... or... 
아래는 스크립트로 포커스 이동
-->

<div class="m_radio fcolumn">
  <div class="fcoldiv">
    <input type="radio" name="servicereason" id="servicereason1" value="voc" v-model="service.reason" @change="reasonChange">
    <label for="servicereason1">VOC</label>
    <input type="text" id="servicereason1" class="etc_ip" :class="{ipno: service.reason === 'etc'}" ref="servicereavoc" v-model="service.reavoc">
  </div>
  <div class="fcoldiv">
    <input type="radio" name="servicereason" id="servicereason2" value="etc" v-model="service.reason" @change="reasonChange">
    <label for="servicereason2">기타</label>
    <input type="text" id="servicereason2" class="etc_ip" :class="{ipno: service.reason === 'voc'}" ref="servicereaetc" v-model="service.reaetc">
  </div>
</div>

js

<script src="js/vue3.min.js"></script>
<script>
  const { createApp, reactive, ref, onMounted } = Vue;

  const App = {
      // 포커스용
      const memberwithdcmt = ref(null);
      const servicereavoc = ref(null);
      const servicereaetc = ref(null);
            
      const member = reactive({
        withdchk: "voc",// 탈퇴 사유 : voc, etc
        withdcmt: "",// 탈퇴 사유가 etc 일 때 내용
      });
      
      const service = reactive({
        reason: "voc",// 선택 : voc, 기타(etc)
        reavoc: "",// voc 일 때 내용
        reaetc: "",// 기타 일 때 내용
      });
      
      // 포커스 이동
      reasonChange = () => {
        if(service.reason === "voc") {
          service.reaetc = "";
          servicereavoc.value.focus();
        } else {
          service.reavoc = "";
          servicereaetc.value.focus();
        }
      }

      onMounted(() => {
        console.log("mounted");
      })

      return {
        memberwithdcmt, servicereavoc, servicereaetc, member, service,
        reasonChange,
      }
    }
  };

  createApp(App).mount("#app");
</script>

포커스 이동할 때 DOM에는 ref="refname", @event="refname.focus()"의 형태로 작성하면 된다.
(위에서 기타 선택하면 input이 작성 가능해지면서 포커스가 이동된다.)

스크립트에서(@click이나 @change 일 때) 포커스 이동 시키려면 refname.value.focus(); 형태로 작성한다.

끝.