2012-01-05 3 views
5

내 페이지에는 간단한 텍스트 상자와 단추 유형 입력이 있습니다.Enter 키를 눌러 항상 제출 양식

<input id="sText" type="text" /> 
<input id="sButton" type="button" value="button" /> 

내가 jQuery를 사용하여 버튼 클릭을 캡처합니다.

$("[id$=sButton]").click(function() { 

     ...do Stuff 

    }); 

위의 코드는 수동으로 버튼을 클릭하는 한 올바르게 작동합니다. "enter"키를 사용하여 버튼을 클릭 할 때 문제가 발생하기 시작했습니다. 내가하는 일과 상관없이 Enter 키가 기본 제출 기능을 수행하는 것을 막을 수는 없습니다.

내가 한 첫 번째 작업은 입력 유형을 "제출"에서 "버튼"으로 변경하는 것입니다.

은 내가 Enter 키 이벤트를 캡처하기 위해 jQuery를 사용하여 시도 onsubmit="return false;"

폼의 onsubmit을 설정하려고 :

$("#sText").keyup(function (event) { 
     if (event.keyCode == 13) { 
      alert("Enter!"); 
      // $("#sButton").click(); 
     } 
    }); 

내가 양식을 제출 것 같은 내가 Enter 키를 누를 때마다, 그것은이다 , 전체 페이지가 새로 고쳐집니다. 위의 jQuery 코드는 "enter"키 입력을 캡처하지만 양식은 여전히 ​​페이지를 제출하고 새로 고칩니다.

무슨 일인지 잘 모르겠습니다.

답변

9

조치를 취소해야합니다.

event.preventDefault(); 

는하지만 난 당신 만의 keyup하지를 keyDown와 양식 제출을 죽일 수 있다고 생각합니다.

+0

+1 keydown 제안을 위해 –

+1

"event.preventDefault()"추가 외에도 "keypress"로 "keyup"을 변경해야했습니다. keyup 또는 keydown도 작동하지 않았습니다. 감사! – SharpBarb

+0

Enter 키 확인 및 단추를 제출 모드로 다시 전환하는 대신 단추 유형으로 유지하는 것처럼 보이는 것은 많은 추가 코드를 사용하고 있습니다. –

1

Epascarello가 맞습니다. 제출 한 코드로 제출을 취소해야합니다. 그러나 버튼을 제출 유형으로 다시 변경하여 ENTER 키와 버튼 클릭이 동일한 작업을 수행하도록해야합니다. 그렇게하면 한 영역에서 제출 취소 만 처리하면됩니다.

<input id="sButton" type="submit" value="Submit" /> 

JQuery와 :

$("#YourFormId").submit(function(event){ 

     event.preventDefault(); 
     ...do Stuff 

    }); 

하나 개의 기능은 Enter 키를 처리하는이 방법으로하고 버튼을 클릭합니다.

EDIT : event.preventDefault()를 첫 번째 문으로 사용하십시오.

관련 문제