Fare clic sul pulsante Enter trigger

Ho una pagina con due pulsanti. Uno è un <button>elemento e l'altro è a <input type="submit">. I pulsanti appaiono sulla pagina in quell'ordine. Se mi trovo in un campo di testo in un punto qualsiasi del modulo e premo <Enter>, clickviene attivato l' evento dell'elemento pulsante . Presumo che sia perché l'elemento pulsante si trova per primo.

Non riesco a trovare nulla che assomigli a un modo affidabile per impostare il pulsante predefinito, né lo voglio necessariamente a questo punto. In assenza di qualcosa di meglio, ho catturato un tasto premuto in qualsiasi punto del modulo e, se era il <Enter>tasto premuto, lo sto solo negando:

$('form').keypress( function( e ) {
  var code = e.keyCode || e.which;

  if( code === 13 ) {
    e.preventDefault();
    return false; 
  }
})

Per quanto ne so finora, sembra funzionare, ma sembra incredibilmente pugno di ferro.

Qualcuno sa di una tecnica più sofisticata per farlo?

Allo stesso modo, ci sono delle insidie ​​in questa soluzione di cui non sono a conoscenza?

Grazie.

utilizzando

<button type="button">Whatever</button>

dovrebbe fare il trucco.

Il motivo è perché un pulsante all'interno di un modulo ha il suo tipo implicitamente impostato su submit. Come dice zzzzBoz, la specifica dice che il primo buttono inputcon type="submit"è ciò che viene attivato in questa situazione. Se impostato in modo specifico type="button", viene rimosso dalla considerazione dal browser.

È importante leggere le specifiche HTML per capire veramente quale comportamento ci si aspetta:

La specifica HTML5 afferma esplicitamente cosa succede inimplicit submissions :

Il pulsante predefinito di un elemento modulo è il primo pulsante di invio nell'ordine dell'albero il cui proprietario del modulo è quell'elemento modulo.

Se l'agente utente supporta il consentire all'utente di inviare un modulo in modo implicito (ad esempio, su alcune piattaforme premendo il tasto "Invio" mentre un campo di testo è focalizzato in modo implicito invia il modulo), quindi farlo per un modulo il cui pulsante predefinito ha un'attivazione definita il comportamento deve indurre l'agente utente a eseguire passaggi di attivazione di clic sintetici su quel pulsante predefinito.

Ciò non è stato reso esplicito nelle specifiche HTML4, tuttavia i browser hanno già implementato ciò che è descritto nelle specifiche HTML5 (motivo per cui è incluso esplicitamente).

Modifica per aggiungere:

La risposta più semplice che mi viene in mente è quella di mettere il tuo pulsante di invio come primo [type="submit"]elemento nel modulo, aggiungere il riempimento nella parte inferiore del modulo con CSS e posizionare assolutamente il pulsante di invio nella parte inferiore dove ti piacerebbe.

Non penso che tu abbia bisogno di JavaScript o CSS per risolvere questo problema.

Secondo la specifica html 5 per i pulsanti, un pulsante senza attributo type viene trattato come un pulsante con il suo tipo impostato su "submit", ovvero come un pulsante per inviare il suo modulo di contenimento. L'impostazione del tipo di pulsante su "pulsante" dovrebbe impedire il comportamento che stai vedendo.

Non sono sicuro del supporto del browser per questo, ma lo stesso comportamento è stato specificato nelle specifiche html 4.01 per i pulsanti, quindi mi aspetto che sia abbastanza buono.

Premendo 'Enter' su focalizzato <input type="text">si attiva l'evento 'click' sul primo elemento posizionato: <button>o <input type="submit">. Se premi 'Invio' in <textarea>, fai semplicemente una nuova riga di testo.

Vedi l'esempio qui .

Il codice impedisce di <textarea>inserire una nuova riga di testo , quindi è necessario prendere la pressione del tasto solo per <input type="text">.

Ma perché è necessario premere Enternel campo di testo? Se vuoi inviare il modulo premendo 'Invio', ma <button>devi rimanere il primo nel layout, gioca con il markup: metti il <input type="submit">codice prima di <button>e usa CSS per salvare il layout che ti serve.

Cattura "Invio" e salvataggio del markup:

$('input[type="text"]').keypress(function (e) {
    var code = e.keyCode || e.which;
    if (code === 13)
    e.preventDefault();
    $("form").submit(); /*add this, if you want to submit form by pressing `Enter`*/
});

Ovunque tu usi un <button>elemento per impostazione predefinita, considera quel pulsante, type="submit"quindi se lo definisci type="button", non lo considererà <button>come pulsante di invio.

Premendo Invio nel campo di testo di un modulo, per impostazione predefinita, verrà inviato il modulo. Se non vuoi che funzioni in questo modo devi catturare il tasto Invio e consumarlo come hai fatto. Non c'è modo di aggirarlo. Funzionerà in questo modo anche se nel modulo non è presente alcun pulsante.

È possibile utilizzare JavaScript per bloccare l'invio del modulo fino al momento opportuno. Un esempio molto grezzo:

<form onsubmit='return false;' id='frmNoEnterSubmit' action="index.html">

    <input type='text' name='txtTest' />

    <input type='button' value='Submit' 
        onclick='document.forms["frmNoEnterSubmit"].onsubmit=""; document.forms["frmNoEnterSubmit"].submit();' />

</form>

La pressione di invio attiverà comunque il modulo da inviare, ma il javascript gli impedirà di inviarlo, fino a quando non si preme effettivamente il pulsante.

Esempio Dom

  <button onclick="anotherFoo()"> Add new row</button>
  <input type="text" name="xxx" onclick="foo(event)">

javascript

function foo(event){
   if(event.which == 13 || event.keyCode == 13) // for crossbrowser
   {
     event.preventDefault(); // this code prevents other buttons triggers use this
     // do stuff
   }
}

function anotherFoo(){
  // stuffs.
}

se non si utilizza preventDefault (), verranno attivati ​​altri pulsanti.

Lo farei nel modo seguente: Nel gestore dell'evento onclick del pulsante (non inviare) controlla il codice chiave dell'oggetto evento. Se è "invio", restituirei false.

La mia situazione ha due Submitpulsanti all'interno dell'elemento form: Updatee Delete. Il Deletepulsante elimina un'immagine e il Updatepulsante aggiorna il database con i campi di testo nel modulo.

Poiché il Deletepulsante era il primo nel modulo, era il pulsante predefinito sulla Enterchiave. Non quello che volevo. L'utente si aspetterebbe di essere in grado di colpire Enterdopo aver modificato alcuni campi di testo.

Ho trovato la mia risposta all'impostazione del pulsante predefinito qui :

<form action="/action_page.php" method="get" id="form1">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
</form>
<button type="submit" form="form1" value="Submit">Submit</button>

Senza usare alcuno script, ho definito il modulo a cui ogni pulsante appartiene usando l' <button> form="bla"attributo. Ho impostato il Deletepulsante su un modulo che non esiste e Updateho impostato il pulsante che volevo attivare sulla Enterchiave nel modulo in cui si trovava l'utente durante l'inserimento del testo.

Questa è l'unica cosa che ha funzionato per me finora.

Puoi fare qualcosa del genere.

associa il tuo evento a una funzione comune e chiama l'evento premendo il tasto o facendo clic sul pulsante.

per esempio.

function callME(event){
    alert('Hi');
}



$('button').on("click",callME); 
$('input ').keypress(function(event){
  if (event.which == 13) {
    callME(event);
  }
});

Ho aggiunto un pulsante di tipo "submit" come primo elemento del modulo e l'ho reso invisibile ( width:0;height:0;padding:0;margin:0;border-style:none;font-size:0;). Funziona come un aggiornamento del sito, cioè non faccio nulla quando si preme il pulsante tranne che il sito viene caricato di nuovo. Per me funziona benissimo ...