Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.
RetroTech 팟캐스트 44BITS 팟캐스트

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파일을 만들었다.


<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를 두는 방법이다.


<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로만 해결하는 것이 접근성 면에서 훨씬 좋다고 생각하기 때문에.....



궁금해서 포스팅하긴 했는데 결과적으로는 아무것도 전달하지 않는 포스팅이 되어버렸다. 근데 사파리하고 구글 크롬은 인풋 텍스트가 2개라도 엔터누르면 서밋이 된다는거... ㅡ..ㅡ


덧) 이 문제대해서 좀 정확히 알고 계신 분이 있으면 관련 링크나 정보를 알려주시면 정말 감사하겠습니다.
2009/02/16 19:44 2009/02/16 19:44