form 태그 엔터키 submit 방지

업무도중 form태그 안의 input 태그에서 엔터를 눌렀을때 form태그를 submit시키는 일이 벌어져 엔터키로 검색을 하게 되면 페이지의 CSS가 죄다 깨지는 현상이 발생하였습니다.

구글링을 하여, 적절한 답을 찾아내어 기록합니다.

1. script 부분

아래는 script 부분의 코드로 1번과 2번 모두 엔터키를 방지시켜줍니다. 원하는 코드를 사용하면 될 것 같습니다.

1. Javascript 코드

<script>
  document.addEventListener('keydown', function(event) {
      if ((event.keyCode || event.which) === 13) {
          event.preventDefault();
      }
  }, true);
</script>

2. JQuery

<script>
  $('input[type="text"]').keydown(function() {
      if (event.keyCode === 13) {
          event.preventDefault();
      }
  });
</script>

2. html 부분

<div class="col-12">
  <div class="search-box">
    <input type="text" name="word" id="word" value="<c:out value='${searchVO.word}' />" 
           autocomplete="off" onkeydown="if(event.keyCode == 13){searcht();}">
    <button type="button" class="srch-btn" title="검색" onClick="search()"></button>
  </div>
</div>

위 코드는 검색창 옆의 검색버튼을 누를 경우 srcipt 부분에서 정의된 search() 함수를 호출합니다.

또한 검색창에 검색할 단어를 입력하고 엔터를 눌러도 똑같이 search() 함수를 호출하여 CSS가 깨지지 않고 검색을 할 수 있게 해줍니다.