* keyup 이벤트 예:
const input= document.querySelector('.input_state')
const p_log= document.querySelector('.para_text')
const isEmail= (value) => {
return (value.indexOf('@') !== -1) && (value.split('@')[1].indexOf('.') !== -1);
};
input.addEventListener('keyup', (e) => { // 입력 상황을 실시간으로 반영하기 위해 change가 아닌 keyup 이벤트를 씀!
const value= e.currentTarget.value
if (isEmail(value)) {
p_log.style.color= 'green'
p_log.textContent= `맞는 이메일 형식입니다: ${value}`
} else {
p_log.style.color= 'red'
p_log.textContent= `이메일 형식이 아닙니다! ${value}`
}
});
☞
여기서는 실시간으로 입력 상태를 체크하기 위해 <input> 요소에서 (change
가 아닌)keyup
이벤트를 사용하였다!