이메일입력할 때 직접입력 구현하기

우린 회원가입할때나 이메일을 찾을때 빈번하게 사용되는 이메일 리스트를 받아보고, 그중에서 없다면 

'직접입력'을 통해서 직접입력해서 이메일체크, 인증을 시도합니다.

그러나 일반적인 input 태그 또는 select로는 해당 기능을 구현하기 쉽지않습니다 .

자바스크립트와 해당 형식이 어느정도 있다면 쉽게 구현 할 수 있습니다.

<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="이메일" aria-label="Username" id="signupModalInputtedUserEmail">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="naver.com" id="showSelectedValue" value ="naver.com" aria-label="Username" disabled='true' />
<select class="form-select" aria-label="Default select example" onchange="selectEmailChange(this)">
<option selected value ="naver">네이버</option>
<option value="google">구글</option>
<option value="daum">다음</option>
<option value="user_email_input">직접입력</option>
</select>
</div>
<div class="d-grid gap-2 col-6 mx-auto">
<button type="button" class="btn btn-primary" id="checkEmail" onclick="checkEmail()">이메일 인증</button>
</div>
<div id='checkEmailConfirm' ></div>

저의 회원가입 과정중 이메일인증하는 화면입니다.

여기서 눈여겨서 봐야할 태그는 select  입니다.

<select class="form-select" aria-label="Default select example" onchange="selectEmailChange(this)">
<option selected value ="naver">네이버</option>
<option value="google">구글</option>
<option value="daum">다음</option>
<option value="user_email_input">직접입력</option>
</select>

해당 부분입니다.

여기서 onchange='' 함수가 호출됩니다.

여기서 onchange는 해당 select 가 변경되었을때 실행되는 것입니다.

해당 selectEmailChange(this)" 의 내용을 설명드리겠습니다.

function selectEmailChange(selected){
    const selected_value = selected[selected.selectedIndex].value;
    let showSelectedValue = document.getElementById('showSelectedValue');
    switch(selected_value){
        case "naver":
        	showSelectedValue.disabled = true;
            showSelectedValue.placeholder="naver.com";
            showSelectedValue.value="naver.com";
            break;
        case "daum":
        	showSelectedValue.disabled = true;
            showSelectedValue.placeholder="daum.net";
            showSelectedValue.value="daum.net";
            break;
        case "google":
        	showSelectedValue.disabled = true;
            showSelectedValue.placeholder="gmail.com";
            showSelectedValue.value="gmail.com";
            break;
        case "user_email_input":
        	 showSelectedValue.value="";
            showSelectedValue.placeholder="";
            showSelectedValue.disabled = false;
            showSelectedValue.focus();
            break;
    }
}

변수로 선택되어진 값을 선언합니다. 그리고 그 값은 this값, 즉 함수를 호출할때 매개변수로 넘겨지던 

 <select class="form-select" aria-label="Default select example" onchange="selectEmailChange(this)">

의 값입니다.

그리고 아이디가 showSelectedValue 인 객체를 호출합니다. 호출하는 이유는 

select의 값이 변할때마다 

이런식으로 회색칸의 글자들이 나오는 부분입니다.

이때 저는 스위치 문을 사용해서

        case "naver":
        	showSelectedValue.disabled = true;
            showSelectedValue.placeholder="naver.com";
            showSelectedValue.value="naver.com";
            break;

option값이 네이버면 네이버로, 구글이면 구글로 

셋팅해주는 로직을 사용했습니다.

그리고

        case "user_email_input":
        	 showSelectedValue.value="";
            showSelectedValue.placeholder="";
            showSelectedValue.disabled = false;
            showSelectedValue.focus();
            break;

직접입력이 선택되어진다면 회색칸의  disable = false로 변경해서 입력가능하게 하고, 원래 입력되어져있는 값들을 빈칸으로 바꾸어 빈칸에 입력할 수 있게 보이도록 했습니다.

그래서 해당 기능이 구현되었습니다.

이메일 선택과 직접입력 하는 기능을 구현하는 방법에 대해 알아보았습니다.