웹 화면에 다음과 같은 형태의 검색 창을 만드는 경우가 종종 있음
<div class="input-group">
<input type="text" id="search_keyword" class="form-control" value="" placeholder="검색 키워드"/>
<span class="input-group-btn">
<button type="button" class="btn btn-secondary btn-success" id="search">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</span>
</div>
보통은 검색 버튼(돋보기 아이콘)을 클릭했을 때만 검색을 수행하도록 이벤트 핸들러를 달지만, 검색 키워드 입력 창에 키워드를 입력하고 enter 키를 누를 때에도 검색이 수행되면 편리함
$("#search").click(search_handler);
$("#search_keyword").keyup(function(event) {
var keyCode = event.keyCode ? event.keyCode : event.which;
if (keyCode == 13) {
search_handler();
}
return false;
});
키 입력 이벤트는 다음과 같이 여러 가지가 존재하는데 동작 방식이 서로 달라서 주의해야 함!;
- keydown
- 키를 누를 때 한 번 발생
- keypress
- 키를 누를 때 계속 발생
- keyup
- 키를 눌렀다 뗄 때 한 번 발생
- 전용 입력기에서는 keyup 이벤트를 listen해야 그 전에 키 조합이 정상적으로 이뤄짐
인터넷에는 keypress 대신에 keyup을 쓰라고 권고하는 예제도 있으나 keydown 이벤트가 먼저 발생하면서 다른 요소에서 이벤트 핸들링이 동작할 수 있음
이런 경우, 예상치 못하게 form을 submit한다든가 하는 부작용이 발생할 수 있음
특수 키에 대해 키 입력 이벤트가 특정 브라우저에서 잘 동작하지 않는 경우가 있으므로 확인이 필요함
상위 요소(form이라든가)로 이벤트가 전파되지 않도록 명시적으로 event.preventDefault()를 사용하는 방법도 있느나, 경우에 따라 효과가 없을 수 있음
이벤트 핸들러 마지막에 return false;하는 것이 반드시 필요함