focus
- focus() 함수는 특정 항목에 입력커서를 할당 가능
- focus 이벤트는 특정항목에 입력커서가 할당되었을때 동작하는 이벤트
blur
- blur 이벤트는 특정 항목에서 입력커서가 빠져 나왔을 때 동작하는 이벤트 -> focus의 반대
예제
<!DOCTYPE html> <html lang="en">
주민번호를 입력하세요
-<script>
/*
- focus() 함수는 특정 항목에 입력커서를 할당 가능
- focus 이벤트는 특정항목에 입력커서가 할당되었을때 동작하는 이벤트
- blur 이벤트는 특정 항목에서 입력커서가 빠져 나왔을 때 동작하는 이벤트 -> focus의 반대
*/
document.querySelectorAll('.jumin').forEach((v, i) => {
v.addEventListener('focus', (e) => {
e.currentTarget.style.background = '#06f';
e.currentTarget.style.color = '#fff';
});
v.addEventListener('blur', (e) => {
e.currentTarget.style.background = '#fff';
e.currentTarget.style.color = '#06f';
});
});
//첫번째 입력항목에 대한 독립적 이벤트
document.querySelector('#jumin1').addEventListener('keyup', (e) => {
//키보드를 누를때마다 스스로의 입력값을 가져옴
//value: input의 입력값
const value = e.currentTarget.value;
if (value.length >= 6) {
//스스로의 입력값을 6글자만 남견놓고 제거
e.currentTarget.value = value.substring(0, 6);
document.querySelector('#jumin2').focus();
}
});
document.querySelector('#jumin2').addEventListener('keyup', (e) => {
//키보드를 누를때마다 스스로의 입력값을 가져옴
//value: input의 입력값
const value = e.currentTarget.value;
if (value.length >= 7) {
//스스로의 입력값을 7글자만 남견놓고 제거
//연속해서 키보드를 눌렀을경우 때버리기 위해서
e.currentTarget.value = value.substring(0, 7);
document.querySelector('#jumin2').blur();
}
});
</script>
냠소현 개발일지