흔하게 회원가입을 할 때 이메일이 자동완성되는 곳이 종종 있다.
onblur 이벤트를 이용해서 쉽게 응용할 수 있을 것 같다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h6>이메일</h6>
<input type="text" id="email-value" name="emailValue" /> <span>@</span>
<input type="text" id="email-domain" name="emailDomain" />
<select id="email-domain-select" onchange="domain_select()">
<option value="">직접 입력</option>
<option value="naver.com">네이버</option>
<option value="gmail.com">구글</option>
<option value="hanmail.net">한메일</option>
</select>
</body>
<script>
const domain_select = () => {
const domain = document.getElementById('email-domain-select').value;
const change = document.getElementById('email-domain');
change.value = domain;
};
</script>
</html>
이메일을 받기 위해 h6태그로 "이메일"을 넣어주고
도메인과 이메일을 따로 받고 @을 기본으로 넣어주게 되니 위와 같은 그림으로 입력칸을 만들었다.
select 문으로 option으로 각 도메인을 선택가능하게 해 놓고
onchange 이벤트를 사용했다.
onchange 이벤트는 만약 다른 값으로 바꾼다면 반응하므로 domain_select() 메소드가 실행된다.
email-domain-select id를 가진 값(select문에서 선택한 값)의 value를 domain 객체에 담고
2번째 입력상자에 그 값을 넣게 되면
누를 때마다 변경된다.
'Visual Studio Code > Visual Studio Code icia 36일차' 카테고리의 다른 글
| Visual Studio Code API에 대해서 (0) | 2023.04.12 |
|---|---|
| Visual Studio Code dom 활용한 예제 - 4 (0) | 2023.04.12 |
