[jquery] 다른 입력 (양식 없음)에서 Enter 키를 누르면 버튼 클릭 이벤트가 발생합니다.

Program / 글쓴이

이 로직은 “Amount”입력에서 “Enter”를 누를 때 발생하며, 이것이해야한다고 생각하지 않습니다 (Chrome에는 없습니다). 이를 방지하고 IE에서 방지하지 않는 경우 클릭 이벤트의 논리가 실행되지 않도록 어떻게 처리 할 수 ​​있습니까?

<html>
 <body>
   <div id="page">
     <div id="financed_amount">
      <h1>Financed Amount:</h1>
      <input type="text" id="amount" value="" />
     </div>
     <h1>Finance Options</h1>
     <div>
      <a id="shareLink" rel="leanModal" name="email" href="#email"></a>
      <button id="btnShare" class="share">Share this report</button>
     </div>
    </div>
   </body>
</html>

스크립트

$("#btnShare").click(function (e) {
    // This logic is firing when pressing "Enter" in the "Amount" input
});
  • Jquery : 1.7.2
  • IE 9
  • (Chrome에서 작동)

답변

나는 같은 문제가 있었고 요소에 type="button"속성을 추가하여 <button>IE가 버튼을 제출 버튼 ( <button>요소의 기본 동작) 대신 간단한 버튼으로 생각하는 것으로 해결했습니다 .

답변

오늘이 문제가 발생했습니다. IE는 텍스트 필드에서 Enter 키를 누르면 해당 필드가 양식의 일부가 아니고 단추가 “제출”유형이 아닌 경우에도 양식을 제출하고자한다고 가정합니다.

preventDefault ()로 IE의 기본 동작을 재정의해야합니다. jQuery 선택기에서 Enter 키를 무시할 텍스트 상자가 포함 된 div (귀하의 경우 “페이지”div)를 입력합니다. 전체 div를 선택하는 대신 특별히 무시할 텍스트 상자를 지정할 수도 있습니다.

$('#page').keypress(function(e) {
    if(e.which == 13) { // Checks for the enter key
        e.preventDefault(); // Stops IE from triggering the button to be clicked
    }
});

답변

ASP.NET WebForms에서이 문제가 발생했습니다.

<asp:Button />

이것은 ASP.NET이 type = “submit”로 대체하기 때문에 type = “button”을 추가하는 것만으로는 해결할 수 없습니다 (요소를 검사하면 브라우저에서이 동작을 볼 수 있습니다).

asp.net에서이를 수행하는 올바른 방법은 다음을 추가하는 것입니다. 

<asp:Button UseSubmitBehavior="false" />

버튼에. ASP는 type = “button”속성을 자동으로 추가합니다.

답변

IE button는 모든 요소가 제출 버튼 이라고 생각 합니다 (유무에 관계없이 form). 또한 Enter암시 적 양식 제출로 양식 요소 의 키 누르기를 처리합니다 . 따라서 귀하가 양식을 제출하려고 click한다고 생각하기 때문에 제출 버튼 에서 이벤트를 발생시키고 도움을 줄 것이라고 생각 합니다.

당신은 첨부 할 수 있습니다 keyup중 하나에 이벤트를 input하거나 button하고 확인 Enter키 ( e.which === 13)와return false;

답변

모든 버튼에 대해이 작업을 수행하는 jQuery 기반 솔루션은 다음과 같습니다.

 $('button').prop('type', 'button'); // To prevent IE from treating every button as a submit and firing a click() event

그러나 클릭 이벤트는 어떤 이유로 든 여전히 상위 요소로 버블 링됩니다.

답변

Chrome의 경우 <button type="submit" style="display:none"/>
기본 버튼 유형이 “제출”이기 때문에 추가 할 수 있습니다.

IE의 경우 type="button"(IE에서 기본 버튼 유형은 “버튼”) 과 동일하게 시도했지만 잘 작동하지 않았습니다.

그래서 여기에 해결책이 있습니다. HTML (keypress)=xxx($event)에서 양식에 추가 하십시오. TS에서

xxx(event) {
 if(event.key === 'Enter' && event.target.type !== 'submit')
event.preventDefault():
}

위의 내용은 크로스 브라우저, 일반 클릭 및 탭 흐름과 같은 모든 시나리오에서 작동합니다.

답변