다른 입력 (양식 없음)에서 Enter 키를 누르면 버튼 클릭 이벤트가 발생합니다.
이 금액은 '금액'입력에서 '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 키를 누르면 필드가 양식의 일부가 아니고 단추가 "submit"유형이 아닌 경우에도 양식을 제출한다고 가정합니다.
preventDefault ()를 사용하여 IE의 기본 동작을 재정의해야합니다. jQuery 선택기에서 Enter 키를 무시하려는 텍스트 상자가 포함 된 div를 입력하십시오 (이 경우 "page"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
그러나 어떤 이유로 클릭 이벤트가 여전히 상위 요소로 버블 링됩니다.
'program story' 카테고리의 다른 글
| 문자열 Ruby on Rails에서 HTML 제거 (0) | 2020.08.02 |
|---|---|
| 주어진 URL에서 도메인 이름 가져 오기 (0) | 2020.08.02 |
| 프로그래밍 방식으로 Android 탐색 막대의 높이와 너비를 얻으려면 어떻게합니까? (0) | 2020.08.02 |
| Intellij IDEA에서 롬복이 추가되었지만 게터 및 세터가 인식되지 않음 (0) | 2020.08.02 |
| IE 8에서 rgba가 작동하지 않는 CSS 배경 불투명도 (0) | 2020.08.02 |