[Form, Javascript] 이메일 직접입력, select 선택 입력

#Javascript#이메일주소직접입력 #이메일주소select선택

 

 

 

SCRIPT

document.addEventListener('DOMContentLoaded', function() {
var emailSelect = document.getElementById('email_1');
 
emailSelect.addEventListener('change', function() {
var selectedOption = emailSelect.options[emailSelect.selectedIndex].value;
var emailBack = document.getElementById('email_back');
var emailInputText = document.getElementById('email_1_text');
 
if (selectedOption === 'text') {
if (!emailInputText) {
emailSelect.removeAttribute('name');
emailSelect.removeAttribute('required');
 
var newInput = document.createElement('input');
newInput.type = 'email';
newInput.name = 'email[1]';
newInput.className = 'email-txt n-ipt';
newInput.id = 'email_1_text';
newInput.maxLength = 50;
newInput.required = true;
 
emailBack.appendChild(newInput);
newInput.focus();
}
} else {
if (emailInputText) {
emailInputText.remove();
}
emailSelect.setAttribute('name', 'email[1]');
}
});
});

 

HTML

    <div class="frm-ipt-box frm-email-ipt-box">
              <div class="frm-ipt-line">
                <h3 class="ipt-tit frm-required">
                  이메일
                </h3>
                <div class="ipt-smallbox email-line">
                  <div class="front">
                    <input type="text" name="email[0]" class="n-ipt" required maxlength="30">
                    <span>@</span>
                  </div>
                  <div class="back" id="email_back">
                    <select name="email[1]" id="email_1" required class="n-ipt">
                      <option value="naver.com">naver.com</option>
                      <option value="hanmail.net">hanmail.net</option>
                      <option value="hotmail.com">hotmail.com</option>
                      <option value="nate.com">nate.com</option>
                      <option value="yahoo.co.kr">yahoo.co.kr</option>
                      <option value="empas.com">empas.com</option>
                      <option value="dreamwiz.com">dreamwiz.com</option>
                      <option value="freechal.com">freechal.com</option>
                      <option value="lycos.co.kr">lycos.co.kr</option>
                      <option value="korea.com">korea.com</option>
                      <option value="gmail.com">gmail.com</option>
                      <option value="hanmir.com">hanmir.com</option>
                      <option value="paran.com">paran.com</option>
                      <option value="text">직접입력</option>
                    </select>
                  </div>
                </div>
              </div>
            </div>

 

CSS

.frm-ipt-box .frm-ipt-line{
  display: flex;
  align-items: center;
  gap: 12px;
}
.frm-ipt-box .ipt-tit{
  width: 120px;
}
.frm-ipt-box .ipt-tit > span{
  font-size: 20px;
  font-weight: normal;
  letter-spacing: -0.8px;
  color: rgb(0, 0, 0);
  position: relative;
}
.frm-required::after{
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  background-color: rgb(230, 0, 18);
  border-radius: 100%;
  position: absolute;
  top: 0;
  right: -5px;
}
.frm-ipt-box .ipt-smallbox{
  width: calc(100% - 132px);
}
.n-ipt{
  width: 100%;
  background-color: rgb(248, 248, 248);
  outline: none;
  border: none;
  padding: 23px 37px;
  font-size: 20px;
  font-weight: normal;
  letter-spacing: -0.8px;
  text-align: left;
  color: rgb(0, 0, 0);
}
.frm-ipt-box .ipt-smallbox.email-line{
  display: flex;
  gap: 13px;
  align-items: center;
  flex-wrap: wrap;
}
.frm-ipt-box .ipt-smallbox.email-line .front{
  width: 430px;
  position: relative;
}
.frm-ipt-box .ipt-smallbox.email-line .front .n-ipt{
  padding-right: 90px;
}
.frm-ipt-box .ipt-smallbox.email-line .front span{
  position: absolute;
  top: 50%;
  right: 62px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  font-size: 20px;
  font-weight: 300;
  letter-spacing: -0.8px;
  color: rgb(143, 143, 143);
}
.frm-ipt-box .ipt-smallbox.email-line .back{
  display: flex;
  align-items: center;
  gap: 10px;
}
.frm-ipt-box .ipt-smallbox.email-line .back .n-ipt{
  width: 219px;
}