$(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를 쳐서 넘어가는 기능이 실행되는 것이다.