Zdarzenie Button Click jest uruchamiane po naciśnięciu klawisza Enter w innym wejściu (bez formularzy)

111

Ta logika uruchamia się po naciśnięciu „Enter” w polu „Kwota” i nie sądzę, aby tak było (nie działa w Chrome). Jak mogę temu zapobiec, a jeśli nie, w IE, załatw to tak, aby logika zdarzenia kliknięcia nie została uruchomiona.

<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>

Scenariusz

$("#btnShare").click(function (e) {
    // This logic is firing when pressing "Enter" in the "Amount" input
});

JQuery: 1.7.2
IE 9
(Działa w Chrome)

jquery internet-explorer

— contactmatt
źródło

1

Wbrew pytaniu to właśnie mi się przydarzyło w przypadku Chrome i Firefox. Jednak ta sama poprawka (typ przycisku).

— Tim Grant

324

Miałem ten sam problem i rozwiązałem go, dodając type="button"atrybut do <button>elementu, dzięki czemu IE uważa przycisk za prosty przycisk zamiast przycisku przesyłania (co jest domyślnym zachowaniem <button>elementu).

— pallati
źródło

6

Miałem ten sam problem z Firefoksem. atrybut type = "button" również rozwiązał problem

— Alexander Fradiani

109

Żyj tysiąc lat.

— TheBrain

4

Doskonała poprawka. Wydawało mi się, że przeglądarki będą przesyłać automatycznie tylko po naciśnięciu „Enter”, gdy znajdują się wewnątrz tagów <form>. Ale widzę, że się myliłem.

— Clayton Bell,

2

Dni krzyczenia na IE9 (pomiędzy moim ogólnym wrzeszczeniem na inne rzeczy, na które muszę krzyczeć) i to było rozwiązanie. Hot dang.

— phatskat

5

Zostałem ugryziony przez ten problem dwa razy w ciągu zaledwie kilku tygodni. Po prostu dziwne jest wywoływanie type="button"jakiegoś <button>elementu. haha ... :) Miejmy nadzieję, że zapamiętam to następnym razem.

— Sam

33

Dzisiaj napotkałem ten problem. IE zakłada, że jeśli naciśniesz klawisz enter w którymkolwiek z pól tekstowych, chcesz przesłać formularz - nawet jeśli pola nie są częścią formularza i nawet jeśli przycisk nie jest typu „wyślij”.

Musisz nadpisać domyślne zachowanie IE za pomocą PreventDefault (). W selektorze jQuery umieść element div zawierający pola tekstowe, które mają zignorować klawisz Enter - w twoim przypadku element div „page”. Zamiast wybierać cały element div, możesz również określić pola tekstowe, które chcesz specjalnie ignorować.

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

— Christian Clinton
źródło

Najlepsze rozwiązanie, gdy potrzebujesz użyć niestandardowych składników i nie możesz dodać type = "button".

— FireZenk

Dzięki Clinton, to zadziałało dla mnie. Najpierw próbowałem zrobić wszystkie przyciski typu „przycisk” i tak nie działało. Następnie musiałem stłumić bulgotanie zdarzenia po naciśnięciu klawisza Enter.

— Rupesh Kumar Tiwari

Dziękuję bardzo. Szalałem przy komputerze przez ostatnie 2 godziny.

— Edwin

4

Miałem ten problem z ASP.NET WebForms:

<asp:Button />

Nie można tego rozwiązać, dodając po prostu type = "button", ponieważ ASP.NET zastępuje go typem type = "submit" (możesz zobaczyć to zachowanie w przeglądarce, jeśli sprawdzisz element).

Prawidłowym sposobem na zrobienie tego w asp.net jest dodanie

<asp:Button UseSubmitBehavior="false" />

do przycisku. ASP automatycznie doda atrybut type = "button".

— Guilherme
źródło

2

IE uważa, że każdy buttonelement jest przyciskiem przesyłania (niezależnie od tego, czy masz, formczy nie). Obsługuje również naciśnięcie Enterklawisza w elemencie formularza jako niejawne przesłanie formularza. Tak więc, ponieważ sądzi, że próbujesz przesłać formularz, uważa, że pomoże ci to i uruchomi clickzdarzenie (tak jak myśli) przyciskiem przesyłania .

Możesz dołączyć keyupzdarzenie do inputlub buttoni sprawdzić Enterklucz ( e.which === 13) ireturn false;

— Heretic Monkey
źródło

1

Rozwiązanie oparte na jQuery, które robi to dla każdego przycisku, to:

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

Jednak z jakiegoś powodu zdarzenie kliknięcia nadal będzie widoczne w elementach nadrzędnych ...

— lschult2
źródło

0

W przypadku przeglądarki Chrome można dodać, <button type="submit" style="display:none"/> ponieważ domyślny typ przycisku w przeglądarce Chrome to „wyślij”

W przypadku IE próbowałem zrobić to samo z type="button"(w IE domyślny typ przycisku to „przycisk”), ale nie zadziałał dobrze.

Oto rozwiązanie. W HTML dodaj (keypress)=xxx($event)swój formularz. W TS

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

Powyższe będzie działać we wszystkich scenariuszach, takich jak różne przeglądarki, normalne klikanie i przepływ kart.

— Tamil.S
źródło