Button 서로 다른 입력(양식 없음)에서 Enter 키를 누르면 이벤트가 발생합니다.
이 로직은 "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가 버튼을 제출 버튼 대신 단순 버튼으로 생각하는 요소(이것이 a의 기본 동작<button>요소).
저는 오늘 이 문제에 부딪혔습니다.IE는 텍스트 필드 중 하나에서 엔터키를 누르면 필드가 양식의 일부가 아니고 버튼이 "제출" 유형이 아닌 경우에도 양식을 제출할 것으로 가정합니다.
IE의 기본 동작을 preventDefault()로 재정의해야 합니다.jQuery selector에서 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 웹 양식:
<asp:Button />
ASP 때문에 type="button"만 추가하면 해결되지 않습니다.NET은 이를 type=" submit"로 대체합니다(요소를 검사하면 브라우저에서 이 동작을 볼 수 있습니다).
asp.net 에서 이를 수행하는 올바른 방법은 다음을 추가하는 것입니다.
<asp:Button UseSubmitBehavior="false" />
단추로ASP가 type="button" 속성을 자동으로 추가합니다.
IE가 생각하는 것은buttonelement는 submit button입니다. (사용자가form안 할 것).그것은 또한 의 프레스를 처리합니다.Enter암시적 양식 제출로 양식 요소에 키를 입력합니다.그래서, 당신이 당신의 양식을 제출하려고 한다고 생각하기 때문에, 그것이 당신을 해고하고 해고하는 데 도움이 될 것이라고 생각합니다.clicksubmit 버튼에 이벤트가 발생합니다.
첨부하시면 됩니다.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"/>In chrome 기본 버튼 유형이 "submit"이기 때문입니다.
IE의 경우, 저는 동일하게 시도했습니다.type="button"잘 작동하지 (IE의 기본 버튼 유형은 "버튼"입니다) 하지만 잘 작동하지 않았습니다.
이것이 해결책입니다.에서 HTML (keypress)=xxx($event)당신의 형태로TS에서.
xxx(event) {
if(event.key === 'Enter' && event.target.type !== 'submit')
event.preventDefault():
}
위의 내용은 크로스 브라우저, 일반 클릭, 탭 흐름과 같은 모든 시나리오에서 작동합니다.
언급URL : https://stackoverflow.com/questions/12325066/button-click-event-fires-when-pressing-enter-key-in-different-input-no-forms
'programing' 카테고리의 다른 글
| makefile의 "include"와 "-include"의 차이 (0) | 2023.10.25 |
|---|---|
| MySQL INSERT 매개변수가 있는 C# (0) | 2023.10.25 |
| router.query params Angular 5로 탐색 (0) | 2023.10.25 |
| Chocolatey, OneGet, PsGet, NuGet, ...의 차이점은 무엇입니까? (0) | 2023.10.25 |
| 경로를 구성하지 않고 angularjs 단일 페이지 응용 프로그램에서 페이지 새로 고침을 탐지하려면 어떻게 해야 합니까? (0) | 2023.10.25 |