Azione predefinita da eseguire quando si preme Invio in un modulo

Ho un modulo jsf 1.2 con due pulsanti e diversi campi di input. Il primo pulsante scarta i valori immessi e ripopola la pagina con i valori di un db, il secondo pulsante salva i valori immessi. Il problema si verifica quando l’utente preme Invio mentre il cursore si trova in uno dei campi di input, il modulo viene inviato e l’azione associata al primo pulsante viene eseguita.

Il codice si presenta così:

   

È ansible dichiarare un pulsante specifico come azione predefinita quando si preme invio? Questo comportamento è effettivamente specificato da qualche parte?

Questo non è specifico per JSF. Questo è specifico per HTML. La sezione 4.10.22.2 della specifica dei moduli HTML5 specifica in sostanza che il primo elemento nell’ordine “albero” nello stesso

come l’attuale elemento di input nell’albero HTML DOM verrà invocato all’avvio premere .

Esistono fondamentalmente due soluzioni alternative:

  • Utilizzare JavaScript per acquisire il tasto Invio e richiamare il pulsante desiderato.

      

    Se hai forms di testo nel modulo, ti piacerebbe mettere il JS su tutti gli elementi di input non textarea invece che sul modulo. Vedi anche Impedire agli utenti di inviare un modulo premendo Invio .


  • Scambia i pulsanti in HTML e usa i float CSS per scambiarli.

     

    Potrebbe richiedere solo una ottimizzazione dei pixel. Ovviamente inserire i CSS nel proprio file .css ; usare lo style è una ctriggers pratica, l’esempio sopra è per brevità.


Se si utilizza PrimeFaces, dal 3.2 è ansible utilizzare per identificare in modo dichiarativo il pulsante che deve essere richiamato quando si preme il tasto Invio all’interno del modulo.

   ...    

È sotto le copertine che utilizzano JavaScript per ciò che collega un listener di keydown al genitore che a sua volta controlla se il tasto di invio viene premuto in un elemento non textarea / button / link, quindi richiama click() sul elemento bersaglio. Fondamentalmente lo stesso di prima soluzione menzionata in questa risposta.

Ho trovato un modo meno hacky e funziona bene. L’idea è un commandButton nascosto.

Sfortunatamente display:none stile non può essere usato perché il commandButton sarà ignorato. visibility:hidden non è buono perché mantiene lo spazio del componente riservato.

Ma possiamo mettere a punto lo stile in modo che la dimensione del suo aspetto visivo sia zero con il seguente CSS:

 .zeroSize { visibility: hidden; padding: 0px; margin: 0px; border: 0px; width: 0px; height: 0px; } 

E ora tutto quello che serve è:

  

Ciò si tradurrà in un pulsante di comando invisibile che, in base alla regola del primo pulsante di invio successivo, può essere triggersto.

Per hide gli elementi puoi usare css: style="visibility: hidden"

Per modificare l’azione predefinita se si utilizzano primefaces, è ansible utilizzare: Ad esempio:

            

Origine: Primefaces nuovo componente: DefaultCommand

Seguendo la raccomandazione di BalusC di risolvere il problema usando JavaScript, ho scritto del codice jQuery per fare il lavoro:

 $(function(){ $('form').on('keypress', function(event){ if(event.which === 13 && $(event.target).is(':input')){ event.preventDefault(); $('#save').trigger('click'); } }); }); 

CodePen: http://codepen.io/timbuethe/pen/AoKJj

Ignora il tasto INVIO solo nei campi di immissione del testo ( origine ):

  

Puoi usare h:commandLink per il primo pulsante e modificarlo con css come h:commandButton .

Ad esempio, i bootstrap "btn btn-default" lo stesso aspetto su commandLink e commandButton.