안규 공부방

Javascript & JQuery & CSS > example - INPUT 입력폼 엔터키(EnterKey)입력시 자동 Submit 방지

등록일 : 2019-08-28 10:09 조회수 : 94,804

HTML 코드를 작성하면 <form> 태그를 많이 쓰게 되는데
이때  <form> 태그 내 <input text>가 1개인 경우
엔터키를 누르면 자동 submit 됩니다.
input 태그가 2개 이상이면 submit 되지 않습니다.

해결책은 아래 와 같습니다.​

1)  input text를 2개 만든다

 - input type가 2개라 엔터를 submit 안되는 점을 이용

<input type="text"/>
<input type="text" style="display:none;"/>
​
2) onsubmit="return false;" 속성 이용

 - onsubmit 속성을 원천적으로 막습니다

<form onsubmit="return false;">


3) onsubmit="검증함수" 이용

 - 원하는 검증조건을 submit 시 check 하도록 추가

<script>
   function check(f){
      if(조건){
      ... // 코드작성
      return true;
      }else{
      ... // 코드작성
      return false;
   }
</script>

<form name="f" onsubmit="return check(f)">
 
4) event.preventDefault() 이벤트 취소 이용

 - event.preventDefault() 를 이용하여 이벤트를 취소합니다.

$('input[type="text"]').keydown(function() {
    if (event.keyCode === 13) {
        event.preventDefault();
    }
});
※ 혹시 도움이 되셨다면 댓글에 한마디 남겨주세요!
작성자   비밀번호
자동글 방지     (자동글 방지 기능입니다.)
내용   댓글달기 
이메일 문의 : cak0280@nate.com  
Copyright 2000 By ENTERSOFT.KR All Rights Reserved.