JS- focus, blur

ssonnni·2022년 6월 3일
0

focus

  • focus() 함수는 특정 항목에 입력커서를 할당 가능
  • focus 이벤트는 특정항목에 입력커서가 할당되었을때 동작하는 이벤트

blur

  • blur 이벤트는 특정 항목에서 입력커서가 빠져 나왔을 때 동작하는 이벤트 -> focus의 반대

    예제

    <!DOCTYPE html>
    <html lang="en">
Document

주민번호를 입력하세요

-
<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>
```
profile
개발해보자고 🐣

0개의 댓글