(javaScript) input 요소 입력중 엔터키 무효화가 안되는 문제 (submit방지)

✅ 요약
1. 목표한 것 : input 요소 입력중에 엔터키를 쳐도 submit이 안되게 만들기
2. 배운 것 : 왜 ... 왜 나는 배운대로 써도 안 되는거지?...

 

<form action="/" method="post">
	<input type="text" name="inputName">
    <input type="text" name="inputName2">
    <input type="submit" val="제출">
</form>

input 요소 입력 중 엔터키를 누르면 자동으로 submit 처리가 되는 문제.

항상 페이지 만들 때마다 맞닥뜨리는 문제인 것 같은데 항상 똑같이 삽질 오백번 하고 그때마다 다른 방법으로 해결한다.

그런데 오늘은 어지간한 방법을 다 써도 안 돼서... 게시판 닉값(무식하면 몸이고생) 제대로 하는 노가다로 해결한 사례를 써본다

 

 

내가 해본 도전들

(1) input 여러 개 넣기 : 원래 input 요소가 여러개였어서 pass

(2) submit 버튼 없애기

<form action="/" method="post">
	<input type="text" name="inputName">
    <input type="text" name="inputName2">
    <button>제출</button>
</form>
<script>
	$("button").on("click",function(){
    	$("form").submit();
    })
</script>

submit을 아예 없애버리고 button으로 바꾼뒤 해당 button에 js로 제출을 걸어줬다. 뭐 당연하겠지만 이것도 안됨.

 

(2) 이벤트 버블링 차단 메소드 적용

window.event.stopPropagation();
event.preventDefault();

js 코드로 input에 keyup 이벤트 발생시 해당 메소드가 작동하라고 써줬다.

전체 코드를 굳이 안 쓴 이유는 ... 둘다 안됐기 때문이다. (원래 preventDefault쪽이 맞는 건데 혹시몰라 stop~도 써봤다)

남들은? 다 된다는데? 왜 저는 안되는? 거지요?

(3) <form>에 onsubmit="return false;" 걸어주기

왜 이것도 안되는 건진 모르겠는데 이게 lgd로 빡치게 함... 그냥 아예 인덱스로 리다이렉트된다.

 

 

이것말고도 삽질을 굉장히 오래 했는데도 못 찾아서 내가 택한 방법은

"아예 폼태그를 빼버리기"임...

	<input type="text" name="inputName">
    <input type="text" name="inputName2">
    <button>제출</button>

<script>
	$("button").on("click",function(){
    	const form = $("form");
        $("body").append(form);
        form.append($("input[name=inputName]"));
        form.append($("input[name=inputName2]"));
        form.submit();
    })
</script>

(1) 기존 존재하던 폼form태그를 아예 빼버리고 > 이 단계에서 엔터키로 인한 제출 연결은 없어진다

(2) 제출버튼 클릭시 동적으로 form태그 생성한 뒤

(3) 해당 form태그를 본문에 삽입하고 그 태그 아래로 input요소를 모두 옮겨온 다음

(4) 제출하게 만드는 방식

 

사실 남들 다 된다는 다른 방법이 왜 저만 안되는건진 모르겠습니다만? 일단 한바퀴 돌아서라도 성공했으니 넘어가는 걸로?