jquery keypress 엔터키를 누르면 확인버튼 누른 효과

검색창에서 텍스트를 입력하고 엔터를 눌렀을때 자동으로 검색이 되어지는 효과를 구현하고 싶은때가 있습니다. 예를 들어 검색어를 입력하고 매번 확인 버튼을 눌러야 한다면 얼마나 불편 할까요? 그래서 검색어를 입력하고 엔터를 쳤을 때에 확인 버튼을 눌러진 효과를 구현해보고자 합니다.

여기서 검색어 박스는 textarea 로 했는데요. 물론 짤은 검색어이니까 input 으로 하셔서 상관은 없습니다. 만일 input 으로 한다면 <textarea id="textarea"></textarea> 대신에 <input type="text" id="textarea"> 이렇게 해야하겠지만요..

아무튼 여기에서의 핵심은 엔터를 쳤을때에 확인 버튼을 누른 효과를 구현하기 위함이기 때문에.. 스크립트 부분을 설명하겠습니다. 우선 아래의 소스 코드를 참고하십시오.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<div class="container">
    <textarea id="textarea"></textarea>
    <input type="submit" id="submit" value="검색">
</div>

<script>
$('#submit').click(function(){
    // 검색 버튼을 눌렀을때의 기능 구현
});

$('#textarea').keypress(function(event){
     if ( event.which == 13 ) {
         $('#submit').click();
         return false;
     }
});
</script>

위의 소스 코드중에 jquery 스크립트 부분을 보면은.. keypress 이벤트 핸들러를 이용해서 엔터키를 눌렀을 때의 기능을 구현할 수 있습니다. 매개변수는 event  로 값을 받아서.. which 속성값으로 그리고 그 중에 엔터는 코그가 13번 이라서 그 경우에만 검색 버튼을 클릭한 것처럼 하여 해당 함수를 호출 할 수가 있습니다. 그리고 맨 마지막에 return false 를 한 이유는 검색 버튼을 눌렀을 경우에 해당 버튼이 활성화 되어 화면이 스크롤리 되거나 다른 의도하지 않은 동작이 일어나지 않도록 하기 위함입니다. 특히 여기에서는 submit 이 input 으로 되어 있어서 크게 문제가 되지는 않겠지만 링크가 a 태그로 되어있는 경우에 클릭을 했을때에 상단 url 주소에 href 값이 덧붙여지는 현상이 있는데 그것을 막기 위해서도 사용할 수 있습니다. 이상으로 저의 짧은 jquery 를 이용한 엔터키 눌렀을때에 기능 처리를 위한 내용 이었습니다. 감사합니다.

 

keypress enter.txt