Programming/JQUERY
JQUERY 엔터키를 사용해 포커스 이동하기
Beat.
2016. 9. 12. 14:47
안녕하세요.
오늘은 JQUERY 엔터키를 사용해 포커스 이동하기를 알려드리겠습니다.
포커스는 생각보다 많은 곳에서 사용되는데요.
없으면 불편하다고 여기기 때문에 넣어주시는게 좋아요.
그럼 로그인 화면을 예로 들어 보여드리겠습니다.
<body>안에 복사붙여넣기 하시고 실행하시면 됩니다.
<script src="//code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#text1").keydown(function (event) {
//엔터키를 클릭시
if (event.which === 13) {
//비밀번호로 포커스를 이동시킴
$('#text2').focus();
}
});
$("#text2").keydown(function (event) {
//엔터키를 클릭시
if (event.which === 13) {
//버튼 자동 클릭
$("#btn").trigger('click');
}
});
$("#btn").click(function() {
alert("버튼 클릭됨");
})
});
</script>
아이디 : <input type="text" id="text1"><br/>
비밀번호 : <input type="text" id="text2"/><br/>
<input type="button" value="로그인" id="btn"/>
<body>안에 복사붙여넣기 하시고 실행하시면 됩니다.
$('#ID').focus();
로 가져오시면 됩니다.
간단하죠?
의외로 자주 사용하는 방식이니 한번 연습해보세요~
감사합니다.