[JavaScript] input 태그에서 엔터했을 때, 새로고침 현상 막기

[JavaScript] input 태그에서 엔터했을 때, 새로고침 현상 막기

 

 

원인

 

 

input 텍스트 박스에 포커스가 있을 때, 엔터키 누르면 페이지 새로고침 현상이 자꾸 나타난다.

 

원인을 살펴보니, form 태그 내부에 있는 input text box에서 엔터키를 누르게 되면 자동으로 Submit이 되면서 페이지가 재로드된다.

 

 

 

 

해결 방법

 

 

1. form 태그의 onsubmit 속성값 이용

 

<form class="gridOpt search" onsubmit="return false;">

 

 

2. input 박스 추가

 

엔터키를 눌렀을 때 자동으로 submit되는 원인은 form 내부에 input박스가 한 개만 존재하기 때문이다.

 

의미없는 input 박스를 추가하여 이를 방지할 수 있다.

 

<input type="text" style="display:none;">
<input type="text" placeholder="검색어를 입력하세요.">

 

 

3. keycode 값으로 엔터 여부 판단하여 처리

 

- HTML form input

<input type="text" placeholder="검색어를 입력하세요." onkeypress="if(event.keyCode=='13'){event.preventDefault(); searchEvt();}">

- Script

<script>
function searchEvt(){
	// 코드 구현
}
</script>