필수 입력사항이 누락 됬을 경우 포커스를 통해 해당 컴포넌트에 위치 시키는 기능이 있는데요. 오늘은 JSP 포커스 이동 기능에 대해 알아보겠습니다.
보통 회원가입 할때 많이 볼 수 있는 기능인데요.
1. 포커스 기능 예제
이메일과 이름을 모두 입력해야 하는 페이지 입니다.
하지만 이메일만 입력하고 확인을 누르게 되면 어떨가요?
이름 텍스트박스에 정보가 없기 때문에 포커스가 이동되게 됩니다.
2. 예제 소스
제가 만들어 볼 소스는 text 박스에 글자를 입력할 때 길이가 6자 이상이면 다음 text박스에 포커스를 맞추는 기능을 구현해 보겠습니다.
일단 소스 코드는 다음과 같습니다.
<script type="text/javascript"> function moveCursor(textbox){ if(textbox.value.length == 6){ document.getElementById("code").focus(); } } </script> <body> 주민등록번호 : <input type="text" id="birth" onkeyup="moveCursor(this)"> <input type="text" id="code"> </body>
3. 소스 설명
birth라는 텍스트 박스에 글자를 한자한자 입력할 때마다 moveCursor라는 펑션이 작동됩니다.
이 펑션이 작동되면 birth라는 텍스트박스에 적혀진 글자의 길이를 체크하게 되고 글자의 길이가 6이 되면 code라는 텍스트 박스로 자동으로 포커스가 이동되게 됩니다.
즉, 텍스트 박스의 글자가 6이 되면 자동 커서 이동이 구현되는 코드 입니다.
4. 구현 영상
웹사이트 구현시 포커스 기능은 유용하게 사용되니 숙지하시면 좋습니다.
답글 남기기