입력 요소 제어

1. HTML 요소에 대한 반복 처리가 필요한 경우

• $.each() 함수 : HTML 요소의 수 만큼 콜백 함수를 호출하면서 배열의 인덱스와 원소를 파라미터로 전달
  $.each(el, function(index, item){
  // index는 배열의 위치
  // item은 배열의 각 원소
  let value = $(item).val();
  });

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <form id="myform">
        <label>
            <input type="checkbox" class="hobby" 
                value="soccer"/> 축구
        </label>
        <label>
            <input type="checkbox" class="hobby" 
                value="basketball"/> 농구
        </label>
        <label>
            <input type="checkbox" class="hobby" 
                value="baseball"/> 야구
        </label>
        <button type="submit">입력값 확인</button>
        <hr/>
        <div id="result"></div>
    </form>
    <script>
        $("#myform").submit(function(e){
            e.preventDefault();

            // 선택된 항목을 가져온다.-> 배열
            let check_list = $(".hobby:checked");

            // 배열의 길이가 0이면 선택된 항목이 없다는 뜻
            if( check_list.length == 0 ){
                alert("선택된 항목이 없습니다.");
                return false;
            }

            $.each(check_list, function(index, item){
                let vaule = $(item).val();
                $("#result").append("<div>" + vaule + "</div>");
            });

        });
    </script>
</body>
</html>

2. 포커스 관련 이벤트 처리

• 요소에 포커가 들어갔음을 감지하는 이빈트
• fouse()

3. 포커스가 빠져 나왔음을 감지하는 이벤트

-blur() 함수는 포커스가 빠져나왔음을 감지

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
</head>
<body>
    <form id="myform">
        <h3>주민번호를 입력하세여</h3>
        <input type="text" name="jumin" id="jumin1">
        -
        <input type="text" name="jumin" id="jumin2">
    </form>
    <script>
        // 포커스가 들어간 경우 배경 색상 변경
        $("#jumin1, #jumin2").focus(function(){
            $(this).css('background-color', "yellow");
        });

        // 포커스가 빠져나온 경우 배경 색상 변경
        $("#jumin1, #jumin2").blur(function(){
            $(this).css('background-color', "#fff");
        });

        // 키 이벤트 설정
        $("#jumin1, #jumin2").keyup(function(){
           // console.log($(this).val());
           let value = $(this).val();
           if(value.length >= 6){
                let input = value.substring(0,6);
                $(this).val(input);
                $("#jumin2").focus();
           }
        });
    </script>
</body>
</html>