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

Odpowiedzi:

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