Impedisci alla finestra di dialogo dell'interfaccia utente jQuery di impostare lo stato attivo sulla prima casella di testo

Ho impostato una finestra di dialogo modale dell'interfaccia utente jQuery da visualizzare quando un utente fa clic su un collegamento. Ci sono due caselle di testo (mostro solo il codice per 1 per brevità) in quel tag div della finestra di dialogo e viene modificato in una casella di testo DatePicker dell'interfaccia utente jQuery che reagisce sul focus.

Il problema è che la finestra di dialogo dell'interfaccia utente di jQuery ('apri') in qualche modo attiva la prima casella di testo con lo stato attivo, quindi avvia immediatamente il calendario del datepicker.

Quindi sto cercando un modo per evitare che la messa a fuoco si verifichi automaticamente.

<div><a id="lnkAddReservation" href="#">Add reservation</a></div>

<div id="divNewReservation" style="display:none" title="Add reservation">
    <table>
        <tr>
            <th><asp:Label AssociatedControlID="txtStartDate" runat="server" Text="Start date" /></th>
            <td>
                <asp:TextBox ID="txtStartDate" runat="server" CssClass="datepicker" />
            </td>
        </tr>
    </table>

    <div>
        <asp:Button ID="btnAddReservation" runat="server" OnClick="btnAddReservation_Click" Text="Add reservation" />
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        var dlg = $('#divNewReservation');
        $('.datepicker').datepicker({ duration: '' });
        dlg.dialog({ autoOpen:false, modal: true, width:400 });
        $('#lnkAddReservation').click(function() { dlg.dialog('open'); return false; });
        dlg.parent().appendTo(jQuery("form:first"));
    });
</script>

Il log delle modifiche dell'interfaccia utente 1.10.0 di jQuery elenca il ticket 4731 come risolto.

Sembra che focusSelector non sia stato implementato, ma è stata invece utilizzata una ricerca a cascata per vari elementi. Dal biglietto:

Estendi l'autofocus, iniziando con [autofocus], quindi: contenuto tabulare, quindi pulsante, quindi pulsante di chiusura, quindi finestra di dialogo

Quindi, segna un elemento con l' autofocusattributo e quello è l'elemento che dovrebbe ottenere il focus:

<input autofocus>

Nella documentazione viene spiegata la logica del focus (proprio sotto il sommario, sotto il titolo "Focus"):

All'apertura di una finestra di dialogo, lo stato attivo viene automaticamente spostato sul primo elemento che corrisponde al seguente:

1. Il primo elemento nella finestra di dialogo con l' autofocusattributo
2. Il primo :tabbableelemento all'interno del contenuto della finestra di dialogo
3. Il primo :tabbableelemento all'interno della finestra di dialogo della finestra di dialogo
4. Il pulsante di chiusura della finestra di dialogo
5. Il dialogo stesso

Aggiungi un intervallo nascosto sopra di esso, usa ui-helper-hidden-accessibile per renderlo nascosto da un posizionamento assoluto. So che hai quella classe perché stai usando dialoghi da jquery-ui ed è in jquery-ui.

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

Nell'interfaccia utente di jQuery> = 1.10.2, è possibile sostituire il _focusTabbablemetodo prototipo con una funzione placebo:

$.ui.dialog.prototype._focusTabbable = $.noop;

Violino

Ciò influirà su tutti dialogi messaggi nella pagina senza che sia necessario modificarli manualmente.

La funzione originale non fa altro che impostare lo stato attivo sul primo elemento con autofocusattributo / tabbableelemento / o tornare alla finestra di dialogo stessa. Poiché il suo uso sta semplicemente focalizzando l'attenzione su un elemento, non ci dovrebbero essere problemi a sostituirlo con un noop.

A partire dall'interfaccia utente 1.10.0 di jQuery, è possibile scegliere su quale elemento di input concentrarsi utilizzando l'attributo HTML5 autofocus .

Tutto quello che devi fare è creare un elemento fittizio come primo input nella finestra di dialogo. Assorbe l'attenzione per te.

<input type="hidden" autofocus="autofocus" />

Questo è stato testato in Chrome, Firefox e Internet Explorer (tutte le ultime versioni) il 7 febbraio 2013.

http://jqueryui.com/upgrade-guide/1.10/#added-ability-to-specify-which-element-to-focus-on-open

Ho trovato il codice seguente la finestra di dialogo dell'interfaccia utente jQuery per open.

c([]).add(d.find(".ui-dialog-content :tabbable:first")).add(d.find(".ui-dialog-buttonpane :tabbable:first")).add(d).filter(":first").focus();

È possibile aggirare il comportamento di jQuery o modificarlo.

tabindex -1 funziona come soluzione alternativa.

Ho appena capito mentre giocavo.

Ho trovato con queste soluzioni per rimuovere lo stato attivo, causando il ESCblocco del tasto (ovvero la chiusura della finestra di dialogo) quando si è entrati per la prima volta nella finestra di dialogo.

Se la finestra di dialogo si apre e si preme immediatamente ESC, non chiuderà la finestra di dialogo (se è stata abilitata), poiché lo stato attivo è su un campo nascosto o qualcosa del genere e non si ottengono eventi di pressione dei tasti.

Il modo in cui l'ho risolto è stato aggiungere questo all'evento aperto per rimuovere invece lo stato attivo dal primo campo:

$('#myDialog').dialog({
    open: function(event,ui) {
        $(this).parent().focus();
    }
});

In questo modo si attiva la finestra di dialogo, che non è visibile, quindi la ESCchiave funziona.

Impostare tabindex dell'input su -1, quindi dialog.open per ripristinare tabindex se necessario in un secondo momento:

$(function() {
    $( "#dialog-message" ).dialog({
        modal: true,
        width: 500,
        autoOpen: false,
        resizable: false,
        open: function()
        {
            $( "#datepicker1" ).attr("tabindex","1");
            $( "#datepicker2" ).attr("tabindex","2");
        }
    });
});

La mia soluzione alternativa:

open: function(){
  jQuery('input:first').blur();
  jQuery('#ui-datepicker-div').hide();
},  

Ho avuto un contenuto più lungo della finestra di dialogo. All'apertura, la finestra di dialogo scorreva sul primo: tabbable che era in fondo. Ecco la mia soluzione.

$("#myDialog").dialog({
   ...
   open: function(event, ui) { $(this).scrollTop(0); }
});

Soluzione semplice:

Basta creare un elemento invisibile con tabindex = 1 ... Questo non focalizzerà il datepicker ...

per esempio.:

<a href="" tabindex="1"></a>
...
Here comes the input element

Ecco la soluzione che ho implementato dopo aver letto il ticket UI # 4731 di jQuery , originariamente pubblicato da slolife come risposta a un'altra risposta. (Anche il biglietto è stato creato da lui.)

Innanzitutto, in qualunque metodo utilizzi per applicare i completamenti automatici alla pagina, aggiungi la seguente riga di codice:

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

Ciò disabilita il comportamento di "auto focus" di jQuery. Per garantire che il tuo sito continui ad essere ampiamente accessibile, includi i metodi di creazione della finestra di dialogo in modo che sia possibile aggiungere codice aggiuntivo e aggiungere una chiamata per focalizzare il primo elemento di input:

function openDialog(context) {

    // Open your dialog here

    // Usability for screen readers.  Focus on an element so that screen readers report it.
    $("input:first", $(context)).focus();

}

Per indirizzare ulteriormente l'accessibilità quando le opzioni di completamento automatico sono selezionate tramite tastiera, sostituiamo la callback con completamento automatico "select" dell'interfaccia utente di jQuery e aggiungiamo un codice aggiuntivo per garantire che textElement non perda lo stato attivo in IE 8 dopo aver effettuato una selezione.

Ecco il codice che usiamo per applicare i completamenti automatici agli elementi:

$.fn.applyAutocomplete = function () {

    // Prevents jQuery dialog from auto-focusing on the first tabbable element.
    // Make sure to wrap your dialog opens and focus on the first input element
    // for screen readers.
    $.ui.dialog.prototype._focusTabbable = function () { };

    $(".autocomplete", this)
        .each(function (index) {

            var textElement = this;

            var onSelect = $(this).autocomplete("option", "select");
            $(this).autocomplete("option", {
                select: function (event, ui) {
                    // Call the original functionality first
                    onSelect(event, ui);

                    // We replace a lot of content via AJAX in our project.
                    // This ensures proper copying of values if the original element which jQuery UI pointed to
                    // is replaced.
                    var $hiddenValueElement = $("#" + $(textElement).attr('data-jqui-acomp-hiddenvalue'));
                    if ($hiddenValueElement.attr("value") != ui.item.value) {
                        $hiddenValueElement.attr("value", ui.item.value);
                    }

                    // Replace text element value with that indicated by "display" if any
                    if (ui.item.display)
                        textElement.value = ui.item.display;

                    // For usability purposes.  When using the keyboard to select from an autocomplete, this returns focus to the textElement.
                    $(textElement).focus();

                    if (ui.item.display)
                        return false;

                }
            });
        })
        // Set/clear data flag that can be checked, if necessary, to determine whether list is currently dropped down
        .on("autocompleteopen", function (event, ui) {
            $(event.target).data().autocompleteIsDroppedDown = true;
        })
        .on("autocompleteclose", function (event, ui) {
            $(event.target).data().autocompleteIsDroppedDown = false;
        });

    return this;
}

È possibile fornire questa opzione per focalizzare invece il pulsante di chiusura.

.dialog({
      open: function () {
              $(".ui-dialog-titlebar-close").focus();
            }
   });

Questo può essere un comportamento del browser non un problema con il plugin jQuery. Hai provato a rimuovere la messa a fuoco a livello di codice dopo aver aperto il popup.

$('#lnkAddReservation').click(function () {
    dlg.dialog('open');

    // you may want to change the selector below
    $('input,textarea,select').blur();

    return false;
});

Non l'ho provato ma dovrebbe funzionare bene.

Avevo lo stesso problema e l'ho risolto inserendo un input vuoto prima del datepicker, che ruba lo stato attivo ogni volta che si apre la finestra di dialogo. Questo input è nascosto ad ogni apertura della finestra di dialogo e mostrato di nuovo alla chiusura.

Bene, è bello che nessuno abbia trovato la soluzione per ora, ma sembra che io abbia qualcosa per te. La cattiva notizia è che la finestra di dialogo cattura lo stato attivo in ogni caso anche se non sono presenti input e collegamenti. Uso la finestra di dialogo come descrizione comandi e ho sicuramente bisogno di rimanere focalizzato sull'elemento originale. Ecco la mia soluzione:

usa l'opzione [autoOpen: false]

$toolTip.dialog("widget").css("visibility", "hidden"); 
$toolTip.dialog("open");
$toolTip.dialog("widget").css("visibility", "visible");

Mentre la finestra di dialogo è invisibile, lo stato attivo non è impostato da nessuna parte e rimane nella posizione originale. Funziona con tooltip con solo un semplice testo, ma non testato per dialoghi più funzionali in cui può essere importante avere un dialogo visibile al momento dell'apertura. Probabilmente funzionerà bene in ogni caso.

Capisco che il post originale era solo per evitare di focalizzarsi sul primo elemento, ma puoi facilmente decidere dove dovrebbe essere il focus dopo l'apertura della finestra di dialogo (dopo il mio codice).

Testato in IE, FF e Chrome.

Spero che questo possa aiutare qualcuno.

Secondo me questa soluzione è molto bella:

$("#dialog").dialog({
    open: function(event, ui) {
        $("input").blur();
    }
});

Trovato qui: impossibile-rimuovere-autofocus-in-ui-dialog

Ho un problema simile. Apro una finestra di dialogo di errore quando la convalida fallisce e attira l'attenzione, proprio come Flugan lo mostra nella sua risposta . Il problema è che anche se nessun elemento all'interno della finestra di dialogo è tabulato, la finestra di dialogo stessa è comunque focalizzata. Ecco il codice unminified originale da jquery-ui-1.8.23 \ js \ jquery.ui.dialog.js:

// set focus to the first tabbable element in the content area or the first button
// if there are no tabbable elements, set focus on the dialog itself
$(self.element.find(':tabbable').get().concat(
  uiDialog.find('.ui-dialog-buttonpane :tabbable').get().concat(
    uiDialog.get()))).eq(0).focus();

Il commento è loro!

Questo è davvero brutto per me per diversi motivi. La cosa più fastidiosa è che la prima reazione dell'utente è quella di colpire il backspace per eliminare l'ultimo carattere, ma invece gli viene richiesto di lasciare la pagina, perché il backspace viene colpito al di fuori di un controllo di input.

Ho scoperto che la seguente soluzione alternativa funziona abbastanza bene per me:

jqueryFocus = $.fn.focus;
$.fn.focus = function (delay, fn) {
  jqueryFocus.apply(this.filter(':not(.ui-dialog)'), arguments);
};

Stavo cercando un problema diverso ma la stessa causa. Il problema è che la finestra di dialogo si concentra sul primo <a href="">.</a>che trova. Quindi, se hai molto testo nella finestra di dialogo e vengono visualizzate le barre di scorrimento, potresti avere la situazione in cui la barra di scorrimento verrà spostata verso il basso. Credo che ciò risolva anche la prima domanda delle persone. Anche gli altri lo fanno.

La soluzione semplice e facile da capire. <a id="someid" href="#">.</a> come prima riga nella finestra di dialogo div.

ESEMPIO:

 <div id="dialogdiv" title="some title">
    <a id="someid" href="#">.</a>
    <p>
        //the rest of your stuff
    </p>
</div>

Dove viene avviata la finestra di dialogo

$(somediv).dialog({
        modal: true,
        open: function () { $("#someid").hide(); otherstuff or function },
        close: function () { $("#someid").show(); otherstuff or function }
    });

Quanto sopra non avrà nulla di focalizzato e le barre di scorrimento rimarranno nella parte superiore a cui appartiene. Il <a>ottiene attenzione, ma viene poi nascosto. Quindi l'effetto complessivo è l'effetto desiderato.

So che questo è un vecchio thread, ma per quanto riguarda i documenti dell'interfaccia utente non c'è soluzione a questo. Ciò non richiede sfocatura o messa a fuoco per funzionare. Non sono sicuro che sia il più elegante. Ma ha senso e facile da spiegare a chiunque.

Se hai solo un campo sotto forma di finestra di dialogo Jquery ed è quello che ha bisogno di Datepicker, in alternativa, puoi semplicemente impostare lo stato attivo sulla finestra di dialogo Pulsante Chiudi (croce) nella barra del titolo della finestra di dialogo:

$('.ui-dialog-titlebar-close').focus();

Chiamare questa finestra di dialogo DOPO è stata inizializzata, ad esempio:

$('#yourDialogId').dialog();
$('.ui-dialog-titlebar-close').focus();

Perché il pulsante di chiusura viene visualizzato dopo la .dialog()chiamata.

Se stai usando i pulsanti di dialogo, imposta l' autofocusattributo su uno dei pulsanti:

$('#dialog').dialog({
  buttons: [
    {
      text: 'OK',
      autofocus: 'autofocus'
    },
    {
      text: 'Cancel'
    }
  ]
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>

<div id="dialog" title="Basic dialog">
  This is some text.
  <br/>
  <a href="www.google.com">This is a link.</a>
  <br/>
  <input value="This is a textbox.">
</div>

Ho avuto lo stesso problema.

La soluzione alternativa che ho fatto è aggiungere la casella di testo fittizia nella parte superiore del contenitore della finestra di dialogo.

<input type="text" style="width: 1px; height: 1px; border: 0px;" />

Come accennato, questo è un bug noto con l'interfaccia utente di jQuery e dovrebbe essere risolto relativamente presto. Fino ad allora...

Ecco un'altra opzione, quindi non devi pasticciare con tabindex:

Disabilita temporaneamente il datepicker fino all'apertura della finestra di dialogo:

dialog.find(".datepicker").datepicker("disable");
dialog.dialog({
    "open": function() {$(this).find(".datepicker").datepicker("enable");},
});

Per me va bene.

Domanda duplicata: come sfocare il primo input di modulo all'apertura della finestra di dialogo

Per espandere alcune delle risposte precedenti (e ignorare l'aspetto secondario di datepicker), se si desidera impedire focus()all'evento di focalizzare il primo campo di input all'apertura della finestra di dialogo, provare questo:

$('#myDialog').dialog(
    { 'open': function() { $('input:first-child', $(this)).blur(); }
});

Ho avuto un problema simile e l'ho risolto concentrandomi sul dialogo dopo l'apertura:

var $dialog = $("#pnlFiltros")
    .dialog({
        autoOpen: false,
        hide: "puff",                   
        width: dWidth,
        height: 'auto',
        draggable: true,
        resizable: true,
        closeOnScape : true,
        position: [x,y]                    
    });
$dialog.dialog('open');
$("#pnlFiltros").focus(); //focus on the div being dialogued (is that a word?)

Ma nel mio caso il primo elemento è un'ancora, quindi non so se nel tuo caso questo lascerà aperto il datepicker.

EDIT: funziona solo su IE

trova in jquery.ui.js

d.find(".ui-dialog-buttonpane :tabbable").get().concat(d.get()))).eq(0).focus(); 

e sostituisci con

d.find(".ui-dialog-buttonpane :tabbable").get().concat(d.get()))).eq(-1).focus();

jQuery 1.9 viene rilasciato e non sembra esserci una soluzione. Il tentativo di impedire il focus della prima casella di testo con alcuni dei metodi suggeriti non funziona in 1.9. Penso che perché i metodi tentano di sfocare la messa a fuoco o spostare la messa a fuoco si verifica DOPO che la casella di testo nella finestra di dialogo ha già ottenuto la messa a fuoco e ha fatto il suo sporco lavoro.

Non riesco a vedere nulla nella documentazione dell'API che mi faccia pensare che qualcosa sia cambiato in termini di funzionalità prevista. Off per aggiungere un pulsante di apertura ...

Ho avuto un problema simile. Sulla mia pagina il primo input è una casella di testo con il calendario dell'interfaccia utente jQuery. Il secondo elemento è il pulsante. Dato che la data ha già un valore, ho impostato il focus sul pulsante, ma prima aggiungo il trigger per la sfocatura sulla casella di testo. Questo risolve il problema in tutti i browser e probabilmente in tutte le versioni di jQuery. Testato nella versione 1.8.2.

<div style="padding-bottom: 30px; height: 40px; width: 100%;">
@using (Html.BeginForm("Statistics", "Admin", FormMethod.Post, new { id = "FormStatistics" }))
{
    <label style="float: left;">@Translation.StatisticsChooseDate</label>
    @Html.TextBoxFor(m => m.SelectDate, new { @class = "js-date-time",  @tabindex=1 })
    <input class="button gray-button button-large button-left-margin text-bold" style="position:relative; top:-5px;" type="submit" id="ButtonStatisticsSearchTrips" value="@Translation.StatisticsSearchTrips"  tabindex="2"/>
}

<script type="text/javascript">
$(document).ready(function () {        
    $("#SelectDate").blur(function () {
        $("#SelectDate").datepicker("hide");
    });
    $("#ButtonStatisticsSearchTrips").focus();

});   

Questo è davvero importante per smartphone e tablet perché la tastiera viene visualizzata quando un input ha lo stato attivo. Questo è quello che ho fatto, aggiungi questo input all'inizio del div:

<input type="image" width="1px" height="1px"/>

Non funziona con le dimensioni 0px. Immagino sia ancora meglio con una vera immagine trasparente, o .pngo .gifma non ci ho provato.

Finora funziona bene su iPad.

Puoi aggiungere questo:

...

dlg.dialog({ autoOpen:false,
modal: true, 
width: 400,
open: function(){                  // There is new line
  $("#txtStartDate").focus();
  }
});

...

come primo input: <input type="text" style="position:absolute;top:-200px" />