[JavaScript] 폼 이벤트

폼 이벤트

- document.forms : 문서에 존재하는 form들을 반환
Ex. document.forms.memberJoin : name 속성이 memberJoin인 문서 내의 form
Ex. document.forms[0] : 문서 내의 가장 첫 번째 form

- form.elements : 해당 form 내의 name 속성이 일치하는 element 들을 반환
Ex. form.elements.userid : name 속성이 userid인 해당 form 내의 element

- 폼 요소 탐색에 쓰이는 프로퍼티는 태그 구조에 의존하지 않아 태그 깊이와 무관하게 form.elements 사용해 접근
- 반대로 모든 요소는 element.form으로 폼에 접근 가능(역참조)

 

회원가입

미리 만들어놓은 폼 작성!

- 폼 얻기

        console.log(document.forms);
        console.log(document.forms.memberJoin);
        console.log(document.forms[0]);

- 요소 얻기

        let form = document.forms.memberJoin;
        console.log(form.elements);
        console.log(form.elements.userid);
        console.log(form.elements.gender);
        console.log(form.elements.gender[0]);
        console.log(form.elements.gender[1]);

 

- 역참조 가능

        let email = form.elements.email;  //폼->요소
        console.log(email);  
        console.log(email.form);	//요소->폼

 

폼 요소 값 다루기

- input, textarea : input.value 또는 input.checked (checkbox 또는 radio)
- select.options : option 하위 요소들을 담고 있는 컬렉션
- select.value : 현재 선택 된 option 값
- select.selectedIndex : 현재 선택 된 option의 번호(인덱스)

- input text input radio textarea select

 

    <h3>폼 요소 값 다루기</h3>
    <button id="test1">input text</button>
    <button id="test2">input radio</button>
    <button id="test3">textarea</button>
    <button id="test4">select</button>

input text(test1)을 누르면 출력

        document.querySelector("#test1").addEventListener('click', function(){
            console.log("userid.value : " + userid.value);
            email.valu = "email@email.com";
        });

input radio(test2) 

        document.querySelector("#test2").addEventListener('click', function(){
            console.log('male.checked : ' + male.checked);
            female.checked = true;
        });

 

textarea(test3, 자기소개부분)

        document.querySelector("#test3").addEventListener('click', function(){
            console.log("introduce.innterHTML : " + introduce.innterHTML);
            console.log("introduce.value : " + introduce.value);
            introduce.value = "아이엠그라운드 자기소개하기";
        });

 

select(test)나이 확인하기

        document.querySelector("#test4").addEventListener('click', function(){
            console.log(age.options);
            age.options[2].selected = true;
            age.selectedIndex = 3;
            age.value = '50';
            console.log("age.options[2].selected : " + age.options[2].selected);
            console.log("age.selectedIndex : " + age.selectedIndex);
            console.log("age.value : " + age.value);
        });

마지막 나이 선택된 값이 50대였고, 

2번 인덱스(30대)인지,

몇번 인덱스인지,

값은 무엇인지 출력

 

 

focus, blur 이벤트

- focus : 사용자가 폼 요소를 클릭하거나 tab 키를 눌러 요소로 이동 했을 때 autofocus라는 HTML 속성을 사용해도 요소를 포커스 할 수 있으며 이는 페이지가 로드 된 후 자동으로 포커싱
- blur : 사용자가 다른 곳을 클릭하거나 tab 키를 눌러 다음 폼 필드로 이동했을 때 또한 focus, blur 메소드로 요소에 포커스를 주거나 제거할 수 있음

 

앞으로의 예시들을 위한 style 지정

        .invalid {
            border-color : red;
        }

        [id$=result] {
            color : red;
        }

        .focused {
            outline : 3px dotted lightgray;
        }

 

    <button id="test5">userid focus</button>
    <button id="test6">userid blur</button>

 

이메일 입력 확인

    <script>
        test5.addEventListener('click', () => userid.focus());
        test6.addEventListener('click', () => userid.blur());

        email.onblur = function(){
            if(!this.value.includes('@')){
                emailresult.innerHTML = '올바른 이메일 주소를 입력하세요';
                this.classList.add('invalid');
            }
        };

        email.onfocus = function(){
            if(this.classList.contains('invalid')){
                this.classList.remove('invalid');
                emailresult.innerHTML = '';
            }
        }
    </script>

이메일 형식 잘못 입력했을때 빨간 테두리, 빨간경고문이 뜬다.

 

 

 

focusin, focusout 이벤트

- focus 이벤트는 해당 입력 필드에서만 동작하고 버블링 되지 않음
- focusin, focusout은 버블링 적용 됨

    <script>
        form.addEventListener('focusin', () => form.classList.add('focused'));
        form.addEventListener('focusout', () => form.classList.remove('focused'));
    </script>

change 이벤트

- change : 요소 변경이 끝나면 발생
- 텍스트 입력 요소인 경우 요소 변경이 끝날 때가 아니라 포커스를 잃었을 때 이벤트 발생
- select/checkbox/radio는 선택 값이 변경 된 직후 발생

 

    <script>
        form.introduce.addEventListener('change', () => alert('introduce change!'));
        form.age.addEventListener('change', () => alert('age change!'));
    </script>

자기소개란에 값 입력 후 마우스포인터가 밖으로 나가면 alert 실행

나이도 설정을 바꾸면 alert구문이 실행된다 

 

input 이벤트

- input : 키보드 이벤트와 달리 어떤 방법으로든 값을 변경할 때 발생
- Ex. 마우스를 사용하여 글자를 붙여 넣거나 음성 인식 기능을 사용해서 글자를 입력할 때도 반응

 

비밀번호, 비밀번호 확인 값 같은지 확인

- pwd1(비밀번호)부분만 확인해주면 빨간 창이 안 없어진다.

- pwd2에도 똑같이 실행시킨다.

    <script>
        pwd1.addEventListener('input', function () {
            if (pwd1.value != pwd2.value) {
                pwd1.classList.add('invalid');
                pwd2.classList.add('invalid');
                pwdresult.innerHTML = '비밀번호가 일치하지 않습니다.';
            } else {
                pwd1.classList.remove('invalid');
                pwd2.classList.remove('invalid');
                pwdresult.innerHTML = '';
            }
        });

        pwd2.addEventListener('input', function () {
            if (pwd1.value != pwd2.value) {
                pwd1.classList.add('invalid');
                pwd2.classList.add('invalid');
                pwdresult.innerHTML = '비밀번호가 일치하지 않습니다.';
            } else {
                pwd1.classList.remove('invalid');
                pwd2.classList.remove('invalid');
                pwdresult.innerHTML = '';
            }
        });
    </script>

 

submit 이벤트

- submit : 폼을 제출할 때
- 폼을 서버로 전송하기 전 내용을 검증하여 폼 전송을 취소할 때 사용
- 폼을 전송하는 방법
(1) input type="submit" 또는 input type="image" 클릭
(2) input 필드에서 Enter 키 누르기
- form.submit() 메소드는 자바스크립트만으로 폼 전송을 하고자 할 때 사용
- 동적으로 폼을 생성하고 서버에 보낼 수 있음

    <button id="search">네이버 검색하기</button>

    <script>
        search.addEventListener('click', function() {
            let keyword = prompt('검색어를 입력해주세요');

            if(keyword){
                let newForm = document.createElement('form');
                newForm.action = 'https://search.naver.com/search.naver';
                newForm.method = 'GET';
                newForm.innerHTML = '<input type="text" name="query" value="' + keyword + '">'
                //폼을 제출하려면 폼은 문서 내에 있어야함
                document.body.append(newForm);
                newForm.submit();
            }else{
                alert('검색어를 입력하지 않았습니다.');
            }
        });
    </script>