jQuery UI dialog button focus

Quando si apre una finestra di dialogo dell'interfaccia utente jQuery, seleziona uno dei pulsanti e lo evidenzia o attiva lo stato attivo ecc. Come posso interrompere questo comportamento in modo che nessuno dei pulsanti sia evidenziato quando la finestra di dialogo si apre?jQuery UI dialog button focus

EDIT: ho provato il seguente nelle opzioni di dialogo, che non ha rimosso attenzione dai pulsanti:

... 
open:function(event, ui) { $("myunimportantdiv").focus(); }, 
...

NOTA: Come soluzione temporanea ho modificato il CSS per .ui-state-focus ma questo non è l'ideale ...

fonte

2009-11-24 davidsleeps

Vedere http://dev.jqueryui.com/ticket/4731. Verrà aggiunta un'opzione per renderla configurabile in 1.9. – cope360

Vedere http://stackoverflow.com/questions/1202079/prevent-jquery-ui-dialog-from-setting-focus-to-first-textbox per i dettagli del codice che causa questo. – cope360

[Vedere il mio soluzione per evitare attenzione salto di jQuery UI Dialog] [1] [1]: http://stackoverflow.com/questions/1202079/prevent-jquery-ui-dialog-from-setting -focus-to-first-textbox/9428501 # 9428501 – Roc

Utilizzare il metodo sfocatura. Puoi provare questo esempio.

<html> 
    <head> 
     <title>No Focus on jQuery Dialog</title> 
     <link type="text/css" rel="stylesheet" href="ui.all.css" /> 
     <script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
     <script type="text/javascript" src="ui.core.js"></script> 
     <script type="text/javascript" src="ui.dialog.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       // Dialog to confirm or cancel 
       // Focuses on confirm by default. 
       $('#noFocusDialog').dialog({ 
        autoOpen: false, 
        buttons: { 
         Confirm: function() { 
          $(this).dialog('close'); 
         }, 
         Cancel: function() { 
          $(this).dialog('close'); 
         } 
        } 
       }); 

       // Trigger to open the dialog 
       $('#openNoFocusDialog').click(function() { 
        $('#noFocusDialog').dialog('open'); 

        // Remove focus on all buttons within the 
        // div with class ui-dialog 
        $('.ui-dialog :button').blur(); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <a id="openNoFocusDialog" href="#">Open Dialog</a> 
     <div id="noFocusDialog"> 
      <p>Confirm that no elements have focus</p> 
     </div> 
    </body> 
</html>

fonte

2010-02-03 20:15:20

Soluzione perfetta, grazie Ed! Questo mi ha sempre infastidito. – Mfoo

Ho avuto questo stesso problema ... Cercando di impostare la messa a fuoco su un altro elemento non sembrano fare il trucco per me, ma la sfocatura attenzione dall'elemento selezionato (nella richiamata "aperto") ha fatto :

$('#dialog').dialog 
    ({ 
    open: function() 
     { 
     $('#element-that-gets-selected').blur(); 
     } 
    });

suppongo che un modo per prevenire fuoco senza specificare un nome specifico sarebbe quella di utilizzare un selettore con il primo, in questo modo:

$('#dialog').dialog 
    ({ 
    open: function() 
     { 
     $(this).find('select, input, textarea').first().blur(); 
     } 
    });

fonte

2011-01-08 13:04:28 Lev

Ho effettivamente utilizzato il codice di @Ed Saito all'interno della funzione "open:" e ha funzionato bene. Tipo: 'open: function() {$ (". Ui-dialog: button "). Blur(); } – JustinP8

E 'chiara messa a fuoco è la causa del dialogo jQuery per scorrere t o aree interessanti all'apertura. Si riferisce quasi ovunque ora.

sfocatura funziona, ma non se si dispone di un sacco di contenuti. se il pulsante si trova nella parte inferiore del contenuto, la sfocatura rimuoverà la selezione, ma lascerà scorrere la finestra di dialogo verso il basso. usando scrollTop scorreva il contenuto verso l'alto, ma lasciava il pulsante selezionato. Se un utente colpisce accidentalmente la chiave di ritorno, il pulsante o il collegamento si attivano. Ho scelto una combinazione:

$('#dialog').dialog({ 
    open: function (event, ui){ 

     $('a_selector').blur(); 
     $(this).scrollTop(0); 

    } 
});

funzionato come un campione ...

fonte

2011-01-28 19:28:01

grazie per le risposte, ma mi sembra che la soluzione migliore (almeno per me, codice minimo e nessun uso non necessario di metodi sul DOM) è quello di definire i pulsanti di dialogo in una serie di oggetti:

buttons: [{ 
      id : "button1", 
      text : "Button1 text", 
      title : "tooltip1text1", 
      tabIndex: -1, 
      click : clickCallback 
     },{ 
      id  : "button2", 
      text : "Button2 text", 
      title : "tooltip1text2", 
      tabIndex: -1, 
      click : function(){$(this).dialog("close")} 
     }]

la parte importante per evitare che i pulsanti per ottenere attenzione è: tabIntex: -1

È anche un modo comodo e leggibile per dare id ai tuoi pulsanti.

fonte

2012-12-03 07:08:27 Aureltime

Non è una buona idea. Questo interrompe l'accessibilità - disabilita l'uso del tasto tab per navigare in ui. – Vroo

Se sei preoccupato per l'accessibilità (come cita @Vroo) questa risposta è ancora valida se c'è solo il pulsante e chiude la finestra di dialogo. In questo modo l'utente può semplicemente usare la chiave di escape per chiuderla. Assicurati di lasciare la proprietà 'closeOnEscape' come' true'. – Mike

Questo è quello che faccio di solito, funziona tutto il tempo:

open: function() { 
    $('.ui-dialog button').removeClass('ui-state-focus'); 
},

fonte

2013-02-07 10:20:49 silkfire

buttons: [ 
    { 
     tabIndex: -1, 
     text: 'Yes', 
     click: function(){ 
      DeleteStuff(); 
      $(this).dialog('close'); 
     } 
    }, 
    { 
     text: 'No', 
     click: function(){ 
      // Don't delete 
      $(this).dialog('close'); 
     } 
    } 
]

Questo è l'unico modo che ho ottenuto che funziona. tabIndex: -1 è la soluzione.

Oh, e volevo mettere a fuoco il secondo pulsante, quindi il mio "Elimina elemento?" la conferma per impostazione predefinita non elimina l'elemento.

fonte

2013-02-26 08:56:32 Niklaus

Oppure, la semplice creazione di un ingresso fittizio prima di chiamare gli altri pulsanti funziona altrettanto bene. Questo funziona perché l'interfaccia utente cerca semplicemente il primo "input" come predefinito, ingannando l'interfaccia utente per vedere prima un input falso, lo stato attivo viene reindirizzato.

<div id="dialog-confirm" title="Warning!"> 
<input type='text' size='0' style='position:relative;top:-500px;' /> 
<span class="ui-icon ui-icon-alert" style="float: left; margin: 0 0 0 0;"></span> 
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac 
turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit 
amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi 
vitae est. Mauris placerat eleifend leo.</p> 
</div>

fonte

2013-09-29 16:20:21 Mgfranz

Mi sono imbattuto in un piccolo trucco per risolvere ciò che altri potrebbero trovare utile. Una soluzione come questa sembra funzionare per me:

$("#button").click(function() {         
    // this is a hack to prevent the focus from remaining after a click 
    $(this).toggle(this.checked);          
});

Si definisce semplicemente a livello di codice è controllato di nuovo, che sembra chiarire la questione messa a fuoco.

fonte

2015-02-13 21:16:50 poleguy

Bene, tutte le soluzioni qui sembrano andare con codice o hack. Quindi posterò il mio, che si basa solo su CSS override. Quello che mi dava fastidio era il contorno che ha reso l'aspetto del tasto come "selezionato", così ho semplicemente overrided con "none":

.ui-dialog .ui-dialog-titlebar button.ui-button:focus, 
.ui-dialog .ui-dialog-titlebar button.ui-button.ui-state-focus, 
.ui-dialog .ui-dialog-titlebar button.ui-button.ui-state-active, 
.ui-dialog .ui-dialog-titlebar button.ui-button.ui-state-hover { 
    outline:none; 
}

È inoltre possibile aggiungere/sostituire qualsiasi altro stile che ti dà fastidio :)

fonte

2015-03-06 09:51:39

Base eD e le risposte di Lev, ho ottenuto questo buona soluzione:

jQuery("#testDialog").dialog({ 
     height: 280, 
     width: 400, 

     open: function() {    
      jQuery(this).closest(".ui-dialog").find(":button").blur(); 
     } 
    });

fonte

2015-08-11 16:34:52 Justin

so che è già stato selezionato la risposta, ma c'è una soluzione HTML semplice che ho trovato qui molto tempo fa.

Aggiungere il seguente codice come primo elemento all'interno del DIV designato come finestra di dialogo.

<span class="ui-helper-hidden-accessible"><input type="text" /></span>

fonte

2017-06-16 15:31:37

Com'è utile? Che funzionalità di accessibilità fornisce? –

Basta aggiungere questa riga per rimuovere la funzionalità di messa a fuoco automatica:

$.ui.dialog.prototype._focusTabbable = function(){};

è possibile aggiungerlo in un file condiviso javascript e impedirà autofocus di tutte le vostre finestre di dialogo! Non più copia e incolla in tutte le tue finestre di dialogo

fonte

2017-07-21 17:54:35 joalcego

jQuery UI dialog button focus

risposta

Problemi correlati