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

111

이 로직은 "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에서 작동)

jquery internet-explorer

— contactmatt
소스

1

질문과는 달리 Chrome과 Firefox에서이 문제가 발생했습니다. 그래도 동일한 수정 (버튼 유형).

— 팀 그랜트

324

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

— 팔라 티
소스

6

Firefox에서도 같은 문제가 발생했습니다. 유형 = "버튼"속성은 나를 위해 그것을 해결

— 알렉산더 Fradiani에게

109

천년을 살기를 바랍니다.

— TheBrain

4

훌륭한 수정. 브라우저는 <form> 태그 안에있을 때 "Enter"만 자동 제출한다고 생각했습니다. 그러나 나는 내가 틀렸다는 것을 알았다.

— Clayton Bell

2

IE9에서 고함을 지르는 날들 (내가 외쳐야하는 다른 것들에 대한 일반적인 고함 사이) 그리고 이것이 해결책이었습니다. 핫 댕.

— phatskat 2014 년

5

이 문제에 단 몇 주 만에 두 번 물 렸습니다. 요소 를 불러 내야 type="button"하는 것이 이상하다고 느낍니다 <button>. 하하 ... :) 다음 번에 이걸 기억하길 바랍니다.

— Sam

33

오늘이 문제가 발생했습니다. 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
    }
});

— 크리스티안 클린턴
소스

사용자 지정 구성 요소를 사용해야하고 type = "button"을 추가 할 수없는 경우 최상의 솔루션입니다.

— FireZenk 2014 년

감사합니다 클린턴, 이것은 나를 위해 일했습니다. 처음에는 "버튼"유형의 모든 버튼이 작동하지 않도록 만들려고했습니다. 그런 다음 Enter 키를 누를 때 이벤트 버블 링을 억제해야했습니다.

— Rupesh Kumar Tiwari

정말 고맙습니다. 나는 지난 2 시간 동안 내 컴퓨터에 분노했습니다.

— Edwin

4

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

<asp:Button />

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

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

<asp:Button UseSubmitBehavior="false" />

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

— Guilherme
소스

2

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

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

— 이단 원숭이
소스

1

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

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

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

— lschult2
소스

0

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():
}

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

— 타밀어
소스