728x90
반응형
회원가입이나 정보를 입력하는 화면에서 입력창에 입력의 최대 길이 만큼 입력하게되면,
다음 입력박스로 이동하는 페이지 만들기
Script 코드부분
$("#idn").on("keyup",function(){
if(this.value.length == 4){
$("#pw").focus();
}
});"keyup"은 키보드가 눌렸다가 올라오는 순간을 말하는 것이다.
만약 #idn에 입력받은 값의 길이가 4라면,
4번째 입력을 받고 키보드에서 손가락이 떨어지는 순간 #pw로 포커스를 옮긴다.
전체코드
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>focus</title>
<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#idn").on("keyup",function(){
if(this.value.length == 4){
$("#pw").focus();
}
});
});
</script>
</head>
<body>
<table>
ID : <input type="text" name="id" id="idn" size="4" placeholder="아이디" maxlength="4"><p/>
PW : <input type="password" name="pw" id="pw" size="4" placeholder="비밀번호" maxlength="4">
</body>
</html>
keyup에 대한 설명 링크
jQuery keyup, keydown, keypress 차이점, 사용법, 크로스브라우저 사용팁 [펌글입니다]
jQuery+키보드 이벤트를 활용하여 프로그램 작성이 필요하여 구글링중 아주 유용한 포스팅을 확인하였음. 이 포스팅 하나면 웬만한 이벤트는 쉽게 구현 가능할듯함. jQuery comes with three keyboard events
javafactory.tistory.com
jQurey의 on()메소드
프로그램 개발 지식 공유, devkuma
데브쿠마는 프로그래밍 개발에 대한 지식을 공유합니다.
www.devkuma.com
728x90
반응형
'Web Programming > Script' 카테고리의 다른 글
| Uncaught SyntaxError: Invalid or unexpected token (0) | 2021.06.21 |
|---|---|
| 입력창에 정해진 자릿수를 입력하면 자동으로 다음으로 이동 / maxlength 입력시 .next().focus() (0) | 2021.06.04 |
| input type=file 업로드 이미지 미리보기 (0) | 2021.05.17 |
