HTML 텍스트 input 폼에 Enter(엔터)키 이벤트 주기

네이버나 구글, 다음 등 포털사이트 검색창에 텍스트를 입력하고 엔터를 치면

검색이 되는것 처럼 블로그에도 적용하고 싶다는 생각이 들어 만들었습니다.

일단 예제

  
<div class="search" style="float:right;"> 
<s_search>
<input type="text" name="search_name" value="search_text" onKeypress="javascript:if(event.keyCode==13) {search_onclick_submit}"/>
<img src="./images/search.png" onclick="search_onclick_submit" class="submit"/>
</s_search>
</div>

다른건 겉치레니 건너뛰고 input 태그를 봅니다.

<input type="text" name="search_name" value="search_text" onKeypress="javascript:if(event.keyCode==13) {search_onclick_submit}"/>

보면 onKeypress라는 속성이 있는데요 이 속성은 키보드 입력 이벤트를 제어합니다.

Enter 키의 아스키코드값은 13이죠.

 

javascript:if(event.keyCode==13) // 만약 13번의 키가 눌린다면

{search_onclick_submit} // 해당 이벤트를 발생

제 경우는 티스토리이기 때문에 티스토리 검색이벤트 치환자를 사용하였습니다.

자 이제 됬습니다.

정상적으로 엔터키를 누를 시에 검색이 되네요 !

HTML 텍스트 input 폼에 엔터키 이벤트 삽입