본문으로 바로가기
$(document).ready(function() {
        //첫번째 input박스에 대한 액션
        $('#inputbox아이디').keypress(function (e) {
            if (e.which == 13) {
                if($('#inputbox아이디').val()=='') {
                    alert('inputbox아이디에 내용을 입력하세요');
                }
                else {
                    $('#inputbox아이디2').focus();
                }
            }
        });

        //두번째 input박스에 대한 액션
        $('#inputbox아이디2').keypress(function (e) {
            if (e.which == 13) {
                $re=/^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;

                if($(this).val()=='' || $(this).val().length<6 || !$re.test($(this).val())) {
                    alert('inputbox아이디2에 내용을 입력하세요');
                }
                else {
                    $('form#form아이디').submit();
                }
            }
        });
    });

[ 소스코드에 대한 설명 ]


1. 직접 입력해야하는 값에 대한 설명

 - inputbox아이디 : 첫번째 input id ="여기에들어가는 값" 을 넣는다.

 - inputbox아이디2 : 두번째 input id ="여기에 들어가는 값"을 넣는다.

 - form#form아이디 : form아이디를 넣어 액션값을 정의하고싶을경우 다음과 같이 쓴다.

예) <form id = "thisisform" method ="post" action="netxpage.php"> 일때 

jQuery는 $('form#thisisform').anything;으로 사용한다.


2. 첫번째 input박스에 대한 액션 설명

- 13은 enter의 keycode값. 따라서 enter를 쳤을때 5번째 줄을 실행한다.

- inputbox아이디값이 입력 안되있을경우 입력하는 경고창을 띄우고

 - 입력이 되있는 상태에서 enter를 쳤을 경우(else) inputbox아이디2로 커서가 이동(focuse)한다


3. 두번째 input박스에 대한 액션 설명

 - 첫번재 input박스에 대한 액션 설명과 비슷하다. 하지만 email을 입력하는 input박스일 것이라 정의하고 작성했다

 - $re변수는 email 형식으로 제대로 입력했는지 확인하는 정규식이다.

 - 마찬가지로 enter를 쳤을때 19번째 라인 밑의 내용이 실행된다.

 - email형식으로 입력하지 않았을경우($(this).val().length<6 || !$re.test($(this).val())또는 빈칸일경우($(this).val()=='')

내용을 입력하라는 창을 띄어준다.

- 그게아니라면(else) form을 submit한다. 따라서 submit한 것 처럼 실행되라는 액션.

바로 여기서 submit버튼을 누르지 않고 enter를 쳐서 넘어가는 기능이 실행되는 것이다.



댓글을 달아 주세요

  1. 2020.04.19 10:03

    비밀댓글입니다