L'evento Click del pulsante si attiva quando si preme il tasto Invio in un input diverso (nessun modulo)

111

Questa logica si attiva quando si preme "Invio" nell'input "Quantità" e non credo che dovrebbe (non in Chrome). Come posso impedirlo e, in caso contrario, impedirlo in IE, gestirlo in modo che la logica nell'evento clic non si attivi.

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

copione

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

Jquery: 1.7.2
IE 9
(Funziona in Chrome)

jquery internet-explorer

— contactmatt
fonte

1

Contrariamente alla domanda, questo è appena successo a me con Chrome e Firefox. Stessa correzione però (tipo di pulsante).

— Tim Grant

324

Ho avuto lo stesso problema e l'ho risolto aggiungendo l' type="button"attributo <button>all'elemento, con il quale IE pensa che il pulsante sia un semplice pulsante anziché un pulsante di invio (che è il comportamento predefinito di un <button>elemento).

— Pallati
fonte

6

Ho avuto lo stesso problema con Firefox. anche l'attributo type = "button" lo ha risolto per me

— Alexander Fradiani

109

Possa tu vivere mille anni.

— TheBrain

4

Soluzione eccellente. Pensavo che i browser avessero inviato automaticamente solo su "Invio" all'interno dei tag <form>. Ma vedo che mi sbagliavo.

— Clayton Bell

2

Giorni di urla a IE9 (tra le mie urla generali contro altre cose per le quali devo urlare) e questa era la soluzione. Hot dang.

— phatskat

5

Sono stato colpito da questo problema due volte in un paio di settimane. È strano dover chiamare type="button"un <button>elemento. haha ... :) Spero di ricordarmelo per la prossima volta.

— Sam

33

Oggi mi sono imbattuto in questo problema. IE presuppone che se si preme il tasto Invio in uno dei campi di testo, si desidera inviare il modulo, anche se i campi non fanno parte di un modulo e anche se il pulsante non è di tipo "invia".

È necessario sovrascrivere il comportamento predefinito di IE con preventDefault (). Nel tuo selettore jQuery, inserisci il div che contiene le caselle di testo che vuoi ignorare il tasto Invio - nel tuo caso, il div "pagina". Invece di selezionare l'intero div, puoi anche specificare le caselle di testo che desideri ignorare in modo specifico.

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

La migliore soluzione quando è necessario utilizzare componenti personalizzati e non è possibile aggiungere type = "button".

— FireZenk

Grazie Clinton, questo ha funzionato per me. Per prima cosa ho provato a creare tutti i pulsanti di tipo "pulsante" ma non funzionava. Quindi ho dovuto sopprimere l'evento che bolle alla pressione del tasto Invio.

— Rupesh Kumar Tiwari

Grazie mille. Mi sono arrabbiato con il mio computer nelle ultime 2 ore.

— Edwin

4

Ho riscontrato questo problema con ASP.NET WebForms:

<asp:Button />

Questo NON può essere risolto semplicemente aggiungendo type = "button" perché ASP.NET lo sostituisce con type = "submit" (puoi vedere questo comportamento nel browser se controlli l'elemento.)

Il modo corretto per eseguire questa operazione in asp.net è aggiungere

<asp:Button UseSubmitBehavior="false" />

al pulsante. ASP aggiungerà automaticamente l'attributo type = "button".

— Guilherme
fonte

2

IE pensa che qualsiasi buttonelemento sia un pulsante di invio (che tu ne abbia formo meno). Gestisce anche la pressione del Entertasto in un elemento del modulo come invio implicito del modulo. Quindi, dal momento che pensa che tu stia tentando di inviare il tuo modulo, pensa che ti aiuterà e farà scattare l' clickevento su (quello che pensa sia) il pulsante di invio .

È possibile allegare un keyupevento a inputo a buttone controllare la Enterchiave ( e.which === 13) ereturn false;

— Scimmia eretica
fonte

1

Una soluzione basata su jQuery che fa questo per ogni pulsante è:

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

Tuttavia, per qualche motivo l'evento clic continuerà a comparire sugli elementi principali ...

— lschult2
fonte

0

Per Chrome puoi aggiungere <button type="submit" style="display:none"/> perché in Chrome il tipo di pulsante predefinito è "invia"

Per IE, ho provato a fare lo stesso con type="button"(In IE il tipo di pulsante predefinito è "pulsante") ma non ha funzionato bene.

Quindi ecco la soluzione. In HTML aggiungi il (keypress)=xxx($event)tuo modulo. In TS,

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

Quanto sopra funzionerà in tutti gli scenari come browser incrociati, clic normale e flusso di schede.

— Tamil.S
fonte