소스를 한참 봤는데 아무런 이상이 없었다. 서밋버튼도 없는데 이게 서밋이 된다고? 설마~~ 하고는 넘어갔는데 좀 이따가 다시 그 글을 클릭해 봤더니 옆차기님이 답변을 달아 놓으셨다.
페이지안데 input type="text" 하나만 있을때는 폼안에서 엔터를 치면 sumbit() 이 되어버리더라구요..더 깜놀.... input text가 1개만 있으면 엔터누르면 서밋이 되어버린다고? 설마~ 하고 Aptana를 켰다. 그리고 input text가 한개만 있는 HTML파일을 만들었다.
정확한 이유는.. 다른분이 자세히 설명해 주실겁니다.. ^^;;
input type="text" 에서 엔터를 실행했을때 실행을 막어버리거나..
보이지 않은 input type="text" 하나 만들어놓은 꼼수도 있는데...
.. 꼼수일뿐이 겠지요 ㅎㅎ...
<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개라도 엔터누르면 서밋이 된다는거... ㅡ..ㅡ
덧) 이 문제대해서 좀 정확히 알고 계신 분이 있으면 관련 링크나 정보를 알려주시면 정말 감사하겠습니다.
95년 제가 강의할 때 부터 되던 기능입니다. HTML 표준인지는 모르겠지만 Netscape에서 그렇게 동작했기 때문에 발생한 일이 아닌가 싶더군요. 그리고 제 기억으로는 IE도 INPUT가 여러개 있어도 엔터를 치면 SUBMIT이 됩니다. 그래서 엔터를 자주 치는 사람들용 프로그램을 짤때는 엔터를 치면 다음 필드로 이동하도록 폼을 작성했던 기억이 있습니다.
그런 유래가 있었군요. 다른것 각자 표준만들어서 하면서 그런건 일률적으로 잘 따라했군요. ^^
이번에 보면서 테스트 해봤는데 IE6부터는 input text가 2개이상이면 submit이 발생하지 않습니다. 95년도면 5.5이하버전에서는 어떻게 돌아가는지 잘 모르겠네요. 좋은 정보 감사합니다.
이것때문에 소스가 잘못된건가 하고 한참 헤매고 이리저리 테스트해보고...
결과를 알아버리니까 참 허무하네요;;;
좋은 정보 감사합니다.
개인적으로 이해할 수 없는 정책이라서 좀 당황스럽긴 하죠... ㅎ
감사합니다. ^^
굳이 input을 더 만들어주지 않고 엔터에 이벤트를 걸어서
onkeyPress="if (event.keyCode==13){return false;}"
를 이용하시면 됩니다.
예 keypress에서 막아도 되고 본문에 쓴것처럼 onsubmit에서 막아도 동일한 결과를 얻을 수 있습니다.
저는 같은 기능이라면 HTML로 해결하는 걸 더 선호해서 저렇게 작성한 것이고요 자신이 편한쪽으로 해결하면 될듯 싶습니다. 감사합니다.
저도 이 현상때문에 소스를 계속 뒤지다 이곳에서 이유를 발견하네요 ^^
submit 이 되는것을 reflesh 되는건줄알고 고민 했네요^^;
좋은정보 감사합니다 ^^
브라우저 정책은 항상 헷갈리는 문제죠.. ^^
안드로이드 계열 모바일기기에선는 저 방법도 안되는듯합니다;;
현재 옵티머스2x로 테스트중인데,
input 을 hidden으로 넣는방법
keyCode 검출해서 13번 return false; 하는 방법
둘다 실패군요..
며칠째 검색중입니다만 답이없네요 에효 =ㅁ=
모바일에서는 테스트해보지 않아서 잘 모르겠네요. onsubmit의 이벤트를 받아서 return false를 하는 것도 되지 않는 것인가요?
정확히 말하면 안드로이드 모바일 기본브라우저의 문제입니다.
테스트 소스 적어보면...
<div id="searchSet" ...(생략)>
<input type="search" id="search" ...(생략) />
<input type="text" style="visibility:hidden;" />
</div>
$("#searchSet").change(Onsearch_Change); // return false; 붙어있음
$("#searchSet").keyup(Onsearch_Change); // return false; 붙어있음
$("#searchSet").submit(return_false); // return false; 붙어있음
$("#search").submit(return_false); // return false; 붙어있음
이런식입니다. 웬만한곳 다 return false; 처리를 해줘봤는데도 submit 발생하는군요...
물론 event.keyCode, event.which, event.charCode 전부 엔터키 내용 안나옵니다;;
form에 붙이지않아서 그런가 하고 <div>위에 <form>도 추가시켜봤지만... ;;
주소가 index.aspx 에서 index.aspx?#index.aspx 으로 바뀝니다.
해결방법이 없네요 휴 -_-
동작이 그렇다면 거의 버그라고밖에 볼수가 없는데요...
jQuery Mobile소스를 한번 참고해보시면 어떨까요? jQM으로 개발해 본적은 없지만 왠만한 이벤트는 다 후킹해서 Ajax로 변환시켜주는 것으로 알고 있거든요.
안녕하세요?
저도 이 방법때문에 찾다가 여기에는 안나와 있는거 같아서 글 남깁니다.
아래처럼 해보세요.
function nothing() {
return;
}
<form method="post" action="javascript:nothing()">
<input type="text" id="input">
</form>
댓글 감사합니다.
말씀하신 해결책은 동작상으로는 onsubmit을 막아버리는 것과 동일한 구조인데 액션에서 return false;처리를 하신 구조입니다.
같은 동작이라면 일반적으로 javascript가 위치하는 곳이 아닌 action보다는 onsubmit에 위치하는 것이 마크업상 더 낫다고 생각됩니다.
감사합니다.
덕분에 쉽게 해결 했네요
쉽게해결하셨다니 다행이네요. ^^
감사해요~ ㅡ0-)~
IE9 에서 나타나서... 헤매다가 여기까지 찾아왔군요. 후훗...
언제 이런글을!!
검색하다 우연히 포스트를 보고 리플 남겨요. HTML 2.0 표준 스펙에 명시되어 있습니다. (:
http://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2
When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.
브라우저가 이렇게 구현한 기원이 말씀해 주신 스펙인듯 하군요. 감사합니다.
히스토리는 모르겠지만 지금은 빠졌는지 HTML 4.01에는 해당 부분이 없네요. http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.13
하루동안 고민하고 애먹다가 오늘 발견했네요..감사합니다.^^
네 ^^
최초 포스팅 한 날짜가 2009년도 인데 7년이 지난 지금도 여전히 풀리지 않는 미스테리네요 ㅎ
위의 댓글 보면 현재 스펙에는 해당 내용이 들어간 것 같습니다. ㅎ
ㄷㄷ 덕분에 잘 해결하고 갑니다ㅎㅎ