서비스 배포 후 사용자 피드백 반영 중 input 텍스트 박스에서 엔터키 누르면 relaod 기능을 넣지 않았음에도 새로고침 되는 현상이 있었다.
form 태그 사용시 input 태그가 하나만 존재할 때 엔터키를 누르면 자동으로 submit이 되면서 reload 된다고 한다.
해결 방법
1. form 태그 onsubmit 활용하여 return false로 지정 (필자가 사용한 방법)
<form id="searchForm" onsubmit="return false;">2. input 박스 추가
input 태그가 하나 존재하는 경우에만 발생하는 문제로
input 태그를 추가하여 해당 문제를 방지한다.
<input type="text">
<input type="text" placeholder="검색어를 입력하세요.">3. keycode 값으로 enter 여부를 판단하여 처리
<js 부분>
function ReturnKey(e) {
if(e.keyCode == 13 && e.srcElement.type != 'textarea')
return false;
}
<html 부분>
<form name="searchForm" method="post" onkeydown="return ReturnKey(event)">
<input type="text" name="test">
</form>첫번째 방법을 통해 쉽게 해결했지만 두번째 방법은 굳이 의미 없는 인풋을 추가할 필요가 있을까하는 의문이 들었고 세번째 방법은 '어떤 문제에 직면했을때 첫번째 방법보다 세번째 방법을 활용하는게 적절할까?'하는 의문이 들었다.
