Invia la finestra di dialogo dell’interfaccia utente jQuery su

Ho una finestra di dialogo dell’interfaccia utente jQuery con un modulo. Vorrei simulare un clic su uno dei pulsanti della finestra di dialogo in modo da non dover utilizzare il mouse o la scheda su di esso. In altre parole, voglio che funzioni come una normale finestra di dialogo della GUI in cui simula il pulsante “OK”.

Presumo che questa potrebbe essere una semplice opzione con la finestra di dialogo, ma non riesco a trovarla nella documentazione dell’interfaccia utente di jQuery . Potrei associare ogni input di form con keyup () ma non sapevo se esistesse un modo più semplice / pulito. Grazie.

Non so se c’è un’opzione nel widget dell’interfaccia utente di jQuery , ma potresti semplicemente associare l’evento keypress al div che contiene la tua finestra di dialogo …

 $('#DialogTag').keypress(function(e) { if (e.keyCode == $.ui.keyCode.ENTER) { //Close dialog and/or submit here... } }); 

Questo verrà eseguito indipendentemente dall’elemento che ha il focus nella finestra di dialogo, che potrebbe essere o meno una buona cosa a seconda di ciò che desideri.

Se si desidera rendere questa funzionalità predefinita, è ansible aggiungere questa parte di codice:

 // jqueryui defaults $.extend($.ui.dialog.prototype.options, { create: function() { var $this = $(this); // focus first button and bind enter to it $this.parent().find('.ui-dialog-buttonpane button:first').focus(); $this.keypress(function(e) { if( e.keyCode == $.ui.keyCode.ENTER ) { $this.parent().find('.ui-dialog-buttonpane button:first').click(); return false; } }); } }); 

Ecco una vista più dettagliata di come sarebbe:

 $( "#dialog-form" ).dialog({ buttons: { … }, open: function() { $("#dialog-form").keypress(function(e) { if (e.keyCode == $.ui.keyCode.ENTER) { $(this).parent().find("button:eq(0)").trigger("click"); } }); }; }); 

Ho riassunto le risposte sopra e ho aggiunto cose importanti

 $(document).delegate('.ui-dialog', 'keyup', function(e) { var target = e.target; var tagName = target.tagName.toLowerCase(); tagName = (tagName === 'input' && target.type === 'button') ? 'button' : tagName; isClickableTag = tagName !== 'textarea' && tagName !== 'select' && tagName !== 'button'; if (e.which === $.ui.keyCode.ENTER && isClickableTag) { $(this).find('.ui-dialog-buttonset button').eq(0).trigger('click'); return false; } }); 

vantaggi:

  1. Non consentire l’inserimento della chiave su elementi non compatibili come area di testo, select , button o input con pulsante di tipo, immagina utente facendo clic su entra nella textarea e ottieni il modulo inviato invece di ottenere una nuova riga!
  2. L’associazione viene eseguita una sola volta, evita di utilizzare la finestra di dialogo “Apri” per bind il tasto Invio per evitare di associare ancora e ancora la stessa funzione ogni volta che la finestra di dialogo è “aperta”
  3. Evita di modificare il codice esistente come suggerito da alcune risposte precedenti
  4. Utilizza ‘delegato’ invece di deprecato ‘live’ ed evita di utilizzare il nuovo metodo ‘on’ per consentire di lavorare con le versioni precedenti di jquery
  5. Poiché utilizziamo delegato, ciò significa che il codice sopra può essere scritto anche prima della finestra di dialogo di inizializzazione. puoi anche inserirlo nel tag head anche senza $(document).ready
  6. Anche delegato legherà solo un gestore per document e non vincolerà il gestore ad ogni finestra di dialogo come in alcuni codici sopra, per una maggiore efficienza
  7. Funziona anche con windows di dialogo generate dynamicmente come $('

    ').dialog({buttons: .});

  8. Lavorato con ie 7/8/9!
  9. Evita di usare il selettore lento :first
  10. Evita di utilizzare hack come nelle risposte qui per creare un pulsante di invio nascosto

svantaggi:

  1. Esegui il primo pulsante come predefinito, puoi scegliere un altro pulsante con eq() o chiamare una funzione all’interno dell’istruzione if
  2. Tutte le windows di dialogo avranno lo stesso comportamento che è ansible filtrare rendendo il selettore più specifico, ad esempio “#dialog” anziché '.ui-dialog'

So che la domanda è vecchia ma ho avuto lo stesso bisogno, quindi ho condiviso la soluzione che ho usato.

 $('#dialogBox').dialog('open'); $('.ui-dialog-buttonpane > button:last').focus(); 

Funziona perfettamente con l’ultima versione di JQuery UI (1.8.1). È inoltre ansible utilizzare: prima anziché: ultima a seconda del pulsante che si desidera impostare come predefinito.

Questa soluzione, rispetto a quella selezionata in precedenza, ha il vantaggio di mostrare quale pulsante è quello predefinito per l’utente. L’utente può anche TAB tra i pulsanti e premendo ENTER farà clic sul pulsante attualmente messo a fuoco.

Saluti.

Un modo grezzo ma efficace per rendere questo lavoro più generico:

 $.fn.dlg = function(options) { return this.each(function() { $(this).dialog(options); $(this).keyup(function(e){ if (e.keyCode == 13) { $('.ui-dialog').find('button:first').trigger('click'); } }); }); } 

Quindi quando crei una nuova finestra di dialogo puoi farlo:

 $('#a-dialog').mydlg({...options...}) 

E usalo come un normale dialogo jquery da quel momento in poi:

 $('#a-dialog').dialog('close') 

Ci sono modi per migliorarlo per farlo funzionare in casi più speciali. Con il codice di cui sopra, selezionerà automaticamente il primo pulsante nella finestra di dialogo come il pulsante da triggersre quando viene colpito l’invio. Inoltre, presuppone che ci sia solo una finestra di dialogo triggers in un dato momento che potrebbe non essere il caso. Ma tu hai l’idea.

Nota: come accennato in precedenza, il pulsante premuto durante l’invio dipende dalla configurazione. Quindi, in alcuni casi, vorresti usare il: primo selettore nel metodo .find e in altri potresti voler usare:: l’ultimo selettore.

Piuttosto che ascoltare i codici chiave come in questa risposta (che non sono riuscito a far funzionare) è ansible associare l’evento di invio del modulo all’interno della finestra di dialogo e quindi eseguire questa operazione:

 $("#my_form").parents('.ui-dialog').first().find('.ui-button').first().click(); 

Quindi, l’intera cosa sarebbe simile a questa

 $("#my_form").dialog({ open: function(){ //Clear out any old bindings $("#my_form").unbind('submit'); $("#my_form").submit(function(){ //simulate click on create button $("#my_form").parents('.ui-dialog').first().find('.ui-button').first().click(); return false; }); }, buttons: { 'Create': function() { //Do something }, 'Cancel': function() { $(this).dialog('close'); } } }); 

Tieni presente che i diversi browser gestiscono diversamente il tasto Invio, mentre altri non inviano sempre un invio al momento dell’invio.

Ben Clayton è il più accurato e il più breve e può essere collocato nella parte superiore della pagina dell’indice prima di inizializzare qualsiasi finestra di dialogo jQuery. Tuttavia, vorrei sottolineare che “.live” è stato deprecato. L’azione preferita è ora “.on”. Se vuoi “.on” per funzionare come “.live”, dovrai utilizzare gli eventi delegati per colbind il gestore di eventi. Inoltre, alcune altre cose …

  1. Preferisco usare il metodo ui.keycode.ENTER per testare la chiave di invio in quanto non è necessario ricordare il codice chiave attuale.

  2. Usando “$ (‘. Ui-dialog-buttonpane button: first’, $ (this))” per il click selector rende l’intero metodo generico.

  3. Vuoi aggiungere “return false;” per prevenire l’impostazione predefinita e interrompere la propagazione.

In questo caso…

 $('body').on('keypress', '.ui-dialog', function(event) { if (event.keyCode === $.ui.keyCode.ENTER) { $('.ui-dialog-buttonpane button:first', $(this)).click(); return false; } }); 

Non so più semplice, ma di solito si tiene traccia di quale pulsante ha il focus corrente. Se la messa a fuoco viene modificata in un controllo diverso, il “pulsante di messa a fuoco” rimarrà sul pulsante che ha avuto la messa a fuoco per ultimo. Normalmente, il “pulsante di messa a fuoco” inizia sul pulsante predefinito. Toccando un pulsante diverso si modifica il “pulsante di messa a fuoco”. Dovresti decidere se passare a un altro elemento del modulo ripristinerebbe di nuovo il “pulsante di messa a fuoco” sul pulsante predefinito. Probabilmente avrai anche bisogno di un indicatore visivo diverso dal browser predefinito per indicare il pulsante focalizzato, in quanto perde il vero focus nella finestra.

Una volta che la logica del focus dei pulsanti è stata applicata e implementata, probabilmente aggiungerei un gestore di chiavi alla finestra di dialogo stessa e fare in modo che invochi l’azione associata al pulsante attualmente “focalizzato”.

EDIT : Sto assumendo il presupposto che vuoi essere in grado di accedere a hit ogni volta che stai compilando gli elementi del modulo e l’azione del pulsante “corrente” ha la precedenza. Se vuoi solo questo comportamento quando il pulsante è effettivamente focalizzato, la mia risposta è troppo complicata.

Ho trovato questa soluzione, funziona su IE8, Chrome 23.0 e Firefox 16.0

È basato sul commento di Robert Schmidt.

 $("#id_dialog").dialog({ buttons: [{ text: "Accept", click: function() { // My function }, id: 'dialog_accept_button' }] }).keyup(function(e) { if (e.keyCode == $.ui.keyCode.ENTER) $('#dialog_accept_button').click(); }); 

Spero che aiuti chiunque.

A volte dimentichiamo la fondamentale di ciò che il browser già supporta:

  

Ciò farà sì che il tasto INVIO invii il modulo.

Ho fatto così …;) Spero che sarà utile per qualcuno ..

 $(window).keypress(function(e) { if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) { $(".ui-dialog:visible").find('.ui-dialog-buttonpane').find('button:first').click(); return false; } }); 

Questo dovrebbe funzionare per triggersre il clic del gestore di clic del pulsante. questo esempio presume che tu abbia già impostato il modulo nella finestra di dialogo per utilizzare il plugin jquery.validate. ma potrebbe essere facilmente adattato.

 open: function(e,ui) { $(this).keyup(function(e) { if (e.keyCode == 13) { $('.ui-dialog-buttonpane button:last').trigger('click'); } }); }, buttons: { "Submit Form" : function() { var isValid = $('#yourFormsID').valid(); // if valid do ajax call if(isValid){ //do your ajax call here. with serialize form or something... } } 

Mi rendo conto che ci sono già molte risposte, ma naturalmente ritengo che la mia soluzione sia la più netta, e possibilmente la più breve. Ha il vantaggio che funziona su qualsiasi finestra di dialogo creata in qualsiasi momento nel futuro.

 $(".ui-dialog").live("keyup", function(e) { if (e.keyCode === 13) { $('.ok-button', $(this) ).first().click(); } }); 

fatto e fatto

  $('#login input').keyup(function(e) { if (e.keyCode == 13) { $('#login form').submit(); } } 

se conosci il selettore dell’elemento del pulsante:

 $('#dialogBox').dialog('open'); $('#okButton').focus(); 

Dovrebbe fare il trucco per te. Questo focalizzerà il pulsante ok, e inserirà “clic”, come ci si aspetterebbe. Questa è la stessa tecnica utilizzata nelle windows di dialogo dell’interfaccia utente nativa.

  $("#LogOn").dialog({ modal: true, autoOpen: false, title: 'Please Log On', width: 370, height: 260, buttons: { "Log On": function () { alert('Hello world'); } }, open: function() { $(this).parents('.ui-dialog-buttonpane button:eq(0)').focus();} }); 

Ho trovato una soluzione abbastanza semplice per questo problema:

 var d = $('
').dialog( buttons: [{ text: "Ok", click: function(){ // do something alert('it works'); }, className: 'dialog_default_button' }] }); $(d).find('input').keypress(function(e){ if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) { e.preventDefault(); $('.dialog_default_button').click(); } });
 $('#DialogID').dialog("option", "buttons")["TheButton"].apply() 

Questo ha funzionato alla grande per me ..

Ecco cosa ho fatto:

 myForm.dialog({ "ok": function(){ ...blah... } Cancel: function(){ ...blah... } }).keyup(function(e){ if( e.keyCode == 13 ){ $(this).parent().find('button:nth-child(1)').trigger("click"); } }); 

In questo caso, myForm è un object jQuery contenente l’html del modulo (nota, non ci sono tag “form” in là … se li metti in tutto lo schermo si aggiornerà quando premi “invio”).

Ogni volta che l’utente preme “Invio” dal modulo, equivale a fare clic sul pulsante “OK”.

Questo evita anche il problema di avere il modulo aperto con il pulsante “ok” già evidenziato. Mentre ciò andrebbe bene per i moduli senza campi, se hai bisogno che l’utente compili, allora probabilmente vuoi che il primo campo sia evidenziato.

Nessuna di queste soluzioni sembrava funzionare per me in IE9. Ho finito con questo ..

 $('#my-dialog').dialog({ ... open: function () { $(this).parent() .find("button:eq(0)") .focus() .keyup(function (e) { if (e.keyCode == $.ui.keyCode.ENTER) { $(this).trigger("click"); }; }); } }); 

Sotto il corpo viene usato perché il dialogo DIV è stato aggiunto al corpo, quindi il corpo ora ascolta l’evento della tastiera. È stato testato su IE8,9,10, Mojila, Chrome.

 open: function() { $('body').keypress(function (e) { if (e.keyCode == 13) { $(this).parent().find(".ui-dialog-buttonpane button:eq(0)").trigger("click"); return false; } }); } 

Perché non ho abbastanza reputazione per pubblicare commenti.

 $(document).delegate('.ui-dialog', 'keyup', function(e) { var tagName = e.target.tagName.toLowerCase(); tagName = (tagName === 'input' && e.target.type === 'button') ? 'button' : tagName; if (e.which === $.ui.keyCode.ENTER && tagName !== 'textarea' && tagName !== 'select' && tagName !== 'button') { $(this).find('.ui-dialog-buttonset button').eq(0).trigger('click'); return false; } else if (e.which === $.ui.keyCode.ESCAPE) { $(this).close(); } }); 

Anche la risposta modificata da Basemm # 35 aggiunge in Escape per chiudere la finestra di dialogo.

Dai ai tuoi pulsanti le classi e selezionale nel modo consueto:

 $('#DialogTag').dialog({ closeOnEscape: true, buttons: [ { text: 'Cancel', class: 'myCancelButton', click: function() { // Close dialog fct } }, { text: 'Ok', class: 'myOKButton', click: function() { // OK fct } } ], open: function() { $(document).keyup(function(event) { if (event.keyCode === 13) { $('.myOKButton').click(); } }); } }); 

Funziona bene Grazie !!!

open: function () { debugger; $("#dialogDiv").keypress(function (e) { if (e.keyCode == 13) { $(this).parent().find("#btnLoginSubmit").trigger("click"); } }); },