Farklı girişte (form yok) Enter tuşuna basıldığında Düğme Tıklama olayı tetiklenir

111

Bu mantık, "Miktar" girişinde "Enter" tuşuna basıldığında devreye giriyor ve olması gerektiğine inanmıyorum (Chrome'da değil). Bunu nasıl önleyebilirim ve IE'de engellemezseniz, tıklama olayındaki mantığın çalışmaması için halledin.

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

Senaryo

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

Jquery: 1.7.2
IE 9
(Chrome'da çalışır)

jquery internet-explorer

— contactmatt
kaynak

1

Sorunun aksine, bu Chrome ve Firefox'ta başıma geldi. Yine de aynı düzeltme (düğme türü).

— Tim Grant

324

Aynı sorunu yaşadım type="button"ve <button>öğeye öznitelik ekleyerek çözdüm, bu sayede IE düğmeyi gönder düğmesi (bir <button>öğenin varsayılan davranışı ) yerine basit bir düğme olarak düşünüyor .

— pallati
kaynak

6

Firefox ile aynı sorunu yaşadım. type = "button" özelliği de sorunu benim için çözdü

— Alexander Fradiani

109

Bin yıl yaşasın.

— TheBrain

4

Mükemmel düzeltme. Tarayıcıların <form> etiketlerinin içindeyken yalnızca "Enter" ile otomatik olarak gönderileceğini düşündüm. Ama yanıldığımı görüyorum.

— Clayton Bell

2

IE9'da bağırdığım günler (bağırmam gereken diğer şeylere genel bağırışım arasında) ve çözüm buydu. Sıcak serseri.

— phatskat

5

Bu sorunla sadece birkaç hafta içinde iki kez ısırıldı. Sadece type="button"bir <button>elementte seslenmek zorunda olmak garip geliyor . haha ... :) Umarım bunu bir dahaki sefere hatırlarım.

— Sam

33

Bugün bu problemle karşılaştım. IE, metin alanlarından herhangi birinde enter tuşuna basarsanız, alanlar bir formun parçası olmasa ve düğme "gönder" türünde olmasa bile formu göndermek istediğinizi varsayar.

PreDefault () ile IE'nin varsayılan davranışını geçersiz kılmalısınız. JQuery seçicinizde, enter tuşunu yok saymak istediğiniz metin kutularını içeren div'i yerleştirin - sizin durumunuzda, "page" div. Tüm div'i seçmek yerine, özellikle yok saymak istediğiniz metin kutularını da belirtebilirsiniz.

$('#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
kaynak

Özel bileşenler kullanmanız gerektiğinde ve type = "button" ekleyemediğinizde en iyi çözüm.

— FireZenk

Teşekkürler Clinton, bu benim için çalıştı. İlk önce "düğme" türündeki tüm düğmeyi yapmaya çalıştım, yine de işe yaramadı. Daha sonra enter tuşuna basıldığında köpüren olayı bastırmak zorunda kaldım.

— Rupesh Kumar Tiwari

Çok teşekkür ederim. Bilgisayarıma son 2 saattir öfkeliyim.

— Edwin

4

ASP.NET WebForms ile şu sorunu yaşıyordum:

<asp:Button />

ASP.NET bunu type = "submit" ile değiştirdiği için bu sadece type = "button" ekleyerek ÇÖZÜLEMEZ (öğeyi incelerseniz bu davranışı tarayıcıda görebilirsiniz.)

Bunu asp.net'te yapmanın doğru yolu şunu eklemektir:

<asp:Button UseSubmitBehavior="false" />

düğmeye. ASP, type = "button" özelliğini otomatik olarak ekler.

— Guilherme
kaynak

2

IE, herhangi bir buttonöğenin bir gönder düğmesi olduğunu düşünüyor (sizde olsun formya da olmasın). Ayrıca Enter, bir form öğesinde tuşa basılmasını örtük bir form gönderimi olarak ele alır. Bu nedenle, formunuzu göndermeye çalıştığınızı düşündüğü için, size yardımcı olacağını ve clickolayı (düşündüğü gibi) gönder düğmesine basacağını anlar.

Bir ekleyebilir keyupya olay inputya buttonve kontrol Entertuşu ( e.which === 13) vereturn false;

— Kafir Maymun
kaynak

1

Bunu her düğme için yapan jQuery tabanlı bir çözüm:

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

Bununla birlikte, tıklama etkinliği bazı nedenlerden dolayı yine de ana öğelere dönüşecektir ...

— lschult2
kaynak

0

Chrome için ekleyebilirsiniz <button type="submit" style="display:none"/> çünkü Chrome'da varsayılan düğme türü "gönder"

IE için aynı şeyi denedim type="button"(IE'de varsayılan düğme türü "düğme" dir) Ancak iyi çalışmadı.

İşte çözüm burada. HTML'de (keypress)=xxx($event)formunuza ekleyin . TS'de,

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

Yukarıdakiler, tarayıcılar, normal tıklama ve sekme akışı gibi tüm senaryolarda çalışacaktır.

— Tamil.S
kaynak