[Js] input text 에서 엔터 입력시 페이지 이동 막기

엔터키를 눌렀더니 페이지가 아에 redirect(새로 고침)가 되는 현상이 일어났었습니다.

엔터키를 입력했을 때 자동으로 form에 submit이 되는 현상이 일어난 것이지요.

왜 이런일이 일어날까요?

브라우저별로 차이는 있지만 이런 경우는 몇 가지가 정해져 있습니다.

1. <form> 태그 하위에 <input type=text>가 하나 밖에 없는 경우

<form>

     <input type='text' id='nosubmit'>

</form>

2. <form> 태그 하위에 <input type=text>가 여러개지만 한개를 제외한 나머지가 readonly인 경우

<form>

     <input type='text' readonly>

     <input type='text' readonly>

     <input type='text' id='nosubmit'>

</form>

이외에도 다른 경우도 있지만 우선 제가 겪은 것만 적었습니다.

이를 막으려면 다양한 방법이 있습니다.

input text에서 key입력 이벤트에 대해서 차단하는 방법입니다.

$("#nosubmit").click(function(){

     if(e.keycode == 13)

     {

          //submit이 아닌 다른동작하도록 기술

          return;

     }

});

이런 식으로 처리를 할 수 있겠지요.

편리하지만 원하는데로 안 동작하면 참 불편한 기능인 것 같습니다.

=========================================================

출처 : https://blog.outsider.ne.kr/292

form에 input type=text가 1개만 있으면 엔터누르면 서밋이 된다고???

지난주에 OKJSP에서 놀다가 신기한 질문을 봤다. "input type="text"에서 enter 를 누를 경우 알아서 메소드를 탑니다."라는 제목이었는데 가끔 내가 아는 내용에 대해서는 답변을 달기 때문에 제목만 보고 submit버튼 달려있거나 input type="image"가 있거나 그렇겠지 하고 들어가서 봤다.(질문하신 분을 무시한다기 보다 빈도수에서는 잘 모르시는 분들의 질문도 꽤 되기 때문에...)

소스를 한참 봤는데 아무런 이상이 없었다. 서밋버튼도 없는데 이게 서밋이 된다고? 설마~~ 하고는 넘어갔는데 좀 이따가 다시 그 글을 클릭해 봤더니 옆차기님이 답변을 달아 놓으셨다. 

페이지안데 input type="text" 하나만 있을때는 폼안에서 엔터를 치면 sumbit() 이 되어버리더라구요..
정확한 이유는.. 다른분이 자세히 설명해 주실겁니다.. ^^;;
input type="text" 에서 엔터를 실행했을때 실행을 막어버리거나..
보이지 않은 input type="text" 하나 만들어놓은 꼼수도 있는데...
.. 꼼수일뿐이 겠지요 ㅎㅎ...

더 깜놀....  input text가 1개만 있으면 엔터누르면 서밋이 되어버린다고? 설마~ 하고Aptana를 켰다. 그리고 input text가 한개만 있는 HTML파일을 만들었다.

Html

<form method="post" action="./new_file3.html">
    <input type="text" name="test" />
</form>

아무것도 없는 소스이다. submit버튼이 있을 경우는 상식적으로 당연히 엔터를 누르면 서밋이 발생해야 하지만 이게 왜....??? 근데 진자 Submit이 된다 ㅡ...ㅡ  버그인가? 하고 확인들어갔다. IE6, IE7, FF2, FF3, Opera, Safari, Chrome할 것없이 모조리 같은 현상이 발생한다. 이게 표준인가? 원래 한개만 있으면 서밋되게 만들어 놓은 것인가? selectbox나 radio, checkbox같은 게 있어도 상관이 없다. 그냥 input text가 한개 있으면 서밋되어 버린다.

궁금해 미치겠다...... 겁나 찾아봤다. 이런 문제(혹은 버그라고도 얘기하는데 버그는 아닌 느낌이다. 그냥 내 느낌에...)에 대한 언급은 있는데 해결책들만 좀 있지 명확히 왜 이런게 발생하는 지에 대한 얘기는 전혀 없다. 외국사이트도 좀 많이 찾아봤는데 영어가 짧아서 잘 안찾아지드라... 흠....

그래서 찬찬히 고민을 해봤다. 폼안에 input이 1개만 있다라... 단순히 생각하면 1개만 있으면 단연히 전송할려고 한거니까 그냥 바로 해주는건가? 싶었는데 또 그렇지도 않다. 그럼 라디오는? 셀렉트박스는.... 예넨 인풋아냐? 무조건 submit버튼이 있을때만 엔터에 반응하게 하면 통일된 인터페이스아닌가? 왜 이런 현상이 웹표준도 서로 제대로 못 맞추는 브라우저가 한결같이 지키고 있을걸까... 몇일 고민했는데 죽어도 모르겠다. 그냥 gg쳤다 ㅡ..ㅡ



어쨌든......
위의 OKJSP질문 답변에도 나왔지만 대부분의 내용의 해결책은 비슷하다. 가장 일반적인 게 form에 onsubmit()으로 자바스크립트 함수 걸어놓고 엔터키가 먹었을때 input이면 return false;로 submit을 막는 것이다. 머 가장 심플한 방식이다. 브라우저 호환성까지 생각할려면 소스도 복잡하고 해서 소스는 생략한다.

두번째 방법은 보이지 않는 input text를 두는 방법이다. 

Html

<form method="post" action="./new_file3.html">
    <input type="text" name="test" />
    <input type="text" style="display: none;" />
</form>

아주 단순한 꼼수로 해결을 한 방식이다. input text가 1개만 있을때 이런 현상이 나타나니까 2개 만들어주고 1개 감주어 준거다. 스타일을 visibility: hidden;로 할 수도 있지만 비져빌리티는 자리를 차지해서 디스플레이로 처리해 주는게 더 낫다고 생각한다. 이렇게 하면 input text가 2개라서 엔터쳐도 서밋이 발생하지 않는다.

2가지를 보았을 때 개인적으로는 두번째 방식이 훨씬 나은 방식이라고 생각한다. 효과는 동일하고 둘다 꼼수이기는 하지만 기본적으로 HTML로 해결할 수 있다면 자바스크립트를 쓰지 않고 HTML로만 해결하는 것이 접근성 면에서 훨씬 좋다고 생각하기 때문에.....

출처 : http://everyflower.tistory.com/176