티스토리 뷰

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();

로 가져오시면 됩니다.

간단하죠?

의외로 자주 사용하는 방식이니 한번 연습해보세요~

감사합니다.


저작자표시

'Programming > JQUERY' 카테고리의 다른 글

JQUERY 라디오버튼 값 가져오기  (0) 2016.09.07
JQUERY 값 내용 없애기  (0) 2016.09.06
JQUERY 강제 클릭 이벤트  (0) 2016.09.05
JQUERY 테이블 행 추가 삭제 하기  (0) 2016.09.03
공유하기 링크
댓글