Zapobiegaj ustawianiu fokusu w oknie dialogowym interfejsu użytkownika jQuery na pierwsze pole tekstowe

Skonfigurowałem modalne okno dialogowe interfejsu użytkownika jQuery, które będzie wyświetlane, gdy użytkownik kliknie łącze. Istnieją dwa pola tekstowe (pokazuję tylko kod 1 dla zwięzłości) w tym znaczniku div okna dialogowego i zmienia się na pole tekstowe DatePicker interfejsu jQuery, które reaguje na fokus.

Problem polega na tym, że okno dialogowe interfejsu użytkownika jQuery („otwórz”) w jakiś sposób powoduje, że pierwsze pole tekstowe ma fokus, które następnie powoduje natychmiastowe otwarcie kalendarza DatePicker.

Dlatego szukam sposobu, aby zapobiec automatycznemu ustawianiu ostrości.

<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>

jQuery UI 1.10.0 Changelog wyświetla bilet 4731 jako naprawiony.

Wygląda na to, że focusSelector nie został zaimplementowany, ale zamiast tego zastosowano kaskadowe wyszukiwanie różnych elementów. Z biletu:

Rozszerz autofokus, zaczynając od [autofokus], następnie: zawartość z zakładkami, następnie panel przycisków, przycisk zamykania, a następnie okno dialogowe

Więc oznacz element autofocusatrybutem i to jest element, który powinien mieć fokus:

<input autofocus>

W dokumentacji wyjaśniono logikę fokusu (tuż pod spisem treści, pod tytułem „Focus”):

Po otwarciu okna dialogowego fokus jest automatycznie przenoszony do pierwszego elementu, który pasuje do następujących elementów:

1. Pierwszy element w oknie dialogowym z autofocusatrybutem
2. Pierwszy :tabbableelement w treści okna dialogowego
3. Pierwszy :tabbableelement w panelu przycisków okna dialogowego
4. Przycisk zamykania okna dialogowego
5. Samo okno dialogowe

Dodaj ukrytą rozpiętość nad nią, użyj ui-helper-hidden-access, aby ukryć ją za pomocą pozycjonowania bezwzględnego. Wiem, że masz tę klasę, ponieważ używasz okna dialogowego z jquery-ui i jest w jquery-ui.

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

W jQuery UI> = 1.10.2, możesz zastąpić _focusTabbablemetodę prototypową funkcją placebo:

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

Skrzypce

Wpłynie to na wszystkie dialogstrony na stronie bez konieczności ręcznej edycji każdego z nich.

Oryginalna funkcja nie robi nic poza ustawianiem fokusu na pierwszy element z autofocusatrybutem / tabbableelementem / lub cofaniem się do samego okna dialogowego. Ponieważ jego użycie polega tylko na ustawieniu ostrości na elemencie, nie powinno być problemu z zastąpieniem go plikiem noop.

Począwszy od jQuery UI 1.10.0, możesz wybrać element wejściowy, na którym chcesz się skupić, używając autofokusa atrybutu HTML5 .

Wszystko, co musisz zrobić, to utworzyć fikcyjny element jako pierwszy wpis w oknie dialogowym. Absorbuje skupienie dla ciebie.

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

Zostało to przetestowane w Chrome, Firefox i Internet Explorer (wszystkie najnowsze wersje) 7 lutego 2013 r.

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

Znalazłem następujący kod funkcji okna dialogowego interfejsu użytkownika jQuery do otwierania.

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

Możesz obejść zachowanie jQuery lub zmienić zachowanie.

tabindex -1 działa jako obejście.

Po prostu wymyśliłem to podczas zabawy.

Znalazłem dzięki tym rozwiązaniom, aby usunąć fokus, spowodował, że ESCklawisz przestał działać (tj. Zamknął okno dialogowe) przy pierwszym wejściu do okna dialogowego.

Jeśli okno dialogowe otworzy się i natychmiast wciśniesz ESC, nie zamkniesz okna (jeśli masz to włączone), ponieważ fokus znajduje się na jakimś ukrytym polu lub czymś w tym rodzaju i nie otrzymuje zdarzeń naciśnięcia klawisza.

Sposób, w jaki to naprawiłem, polegał na dodaniu tego do zdarzenia open, aby zamiast tego usunąć fokus z pierwszego pola:

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

Spowoduje to ustawienie fokusu na oknie dialogowym, które nie jest widoczne, a następnie ESCklawisz działa.

Ustaw tabindex wejścia na -1, a następnie ustaw dialog.open, aby przywrócić tabindex, jeśli będziesz tego potrzebować później:

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

Moje obejście:

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

Treść była dłuższa niż okno dialogowe. Po otwarciu okno dialogowe przewijało się do pierwszej: tabbable, która znajdowała się na dole. Oto moja poprawka.

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

Proste obejście:

Po prostu utwórz niewidoczny element z tabindex = 1 ... To nie skupi się na datepicker ...

na przykład.:

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

Oto rozwiązanie, które zaimplementowałem po przeczytaniu biletu nr 4731 jQuery UI , pierwotnie opublikowanego przez slolife w odpowiedzi na inną odpowiedź. (Bilet również został stworzony przez niego.)

Po pierwsze, w dowolnej metodzie, której używasz do stosowania autouzupełniania na stronie, dodaj następujący wiersz kodu:

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

To wyłącza zachowanie „autofokusu” jQuery. Aby zapewnić, że witryna będzie nadal szeroko dostępna, opakuj metody tworzenia okna dialogowego, aby można było dodać dodatkowy kod, i dodaj wywołanie, aby skupić się na pierwszym elemencie wejściowym:

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();

}

Aby jeszcze bardziej zająć się dostępnością, gdy opcje autouzupełniania są wybierane za pomocą klawiatury, zastępujemy wywołanie zwrotne autouzupełniania interfejsu użytkownika jQuery „select” i dodajemy dodatkowy kod, aby zapewnić, że textElement nie straci fokusu w IE 8 po dokonaniu wyboru.

Oto kod, którego używamy do stosowania autouzupełniania do elementów:

$.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;
}

Możesz podać tę opcję, aby zamiast tego uaktywnić przycisk zamykania.

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

Może to być zachowanie przeglądarki, a nie problem z wtyczką jQuery. Czy próbowałeś usunąć fokus programowo po otwarciu wyskakującego okienka.

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

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

    return false;
});

Nie testowałem tego, ale powinno działać dobrze.

Ten sam problem rozwiązałem, wstawiając puste dane wejściowe przed selektorem daty, które kradną fokus za każdym razem, gdy otwiera się okno dialogowe. To wejście jest ukrywane przy każdym otwarciu okna dialogowego i pokazywane ponownie po zamknięciu.

Cóż, fajnie, że na razie nikt nie znalazł rozwiązania, ale wygląda na to, że mam coś dla Ciebie. Zła wiadomość jest taka, że ​​okno dialogowe w każdym przypadku przechwytuje fokus, nawet jeśli nie ma w nim danych wejściowych ani linków. Używam okna dialogowego jako podpowiedzi i zdecydowanie potrzebuję skupienia się na oryginalnym elemencie. Oto moje rozwiązanie:

użyj opcji [autoOpen: false]

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

Podczas gdy okno dialogowe jest niewidoczne, fokus nie jest nigdzie ustawiony i pozostaje w pierwotnym miejscu. Działa w przypadku podpowiedzi zawierających zwykły tekst, ale nie jest testowany w przypadku bardziej funkcjonalnych okien dialogowych, w których może być ważne, aby okno dialogowe było widoczne w momencie otwierania. Prawdopodobnie w każdym przypadku będzie działać dobrze.

Rozumiem, że oryginalny post miał po prostu uniknąć skupienia się na pierwszym elemencie, ale możesz łatwo zdecydować, gdzie powinien być fokus po otwarciu okna dialogowego (po moim kodzie).

Przetestowano w IE, FF i Chrome.

Mam nadzieję, że to komuś pomoże.

Moim zdaniem to bardzo fajne rozwiązanie:

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

Znaleziono tutaj: nie można usunąć autofokusa w oknie dialogowym

Mam podobny problem. Otwieram okno dialogowe błędu, gdy walidacja się nie powiedzie, i przechwytuje fokus, tak jak pokazuje to Flugan w swojej odpowiedzi . Problem polega na tym, że nawet jeśli żaden element w oknie dialogowym nie jest tabelą, samo okno dialogowe jest nadal aktywne. Oto oryginalny niezminifikowany kod z 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();

Komentarz należy do nich!

Jest to dla mnie bardzo złe z kilku powodów. Najbardziej irytujące jest to, że pierwszą reakcją użytkownika jest naciśnięcie klawisza Backspace w celu usunięcia ostatniego znaku, ale zamiast tego jest on proszony o opuszczenie strony, ponieważ naciśnięcie klawisza Backspace znajduje się poza kontrolką wejściową.

Okazało się, że następujące obejście działa całkiem nieźle dla mnie:

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

Rozglądałem się za innym problemem, ale z tą samą przyczyną. Problem polega na tym, że okno dialogowe ustawia fokus na pierwsze <a href="">.</a>znalezione. Więc jeśli masz dużo tekstu w oknie dialogowym i pojawiają się paski przewijania, możesz mieć sytuację, w której pasek przewijania zostanie przewinięty do dołu. Uważam, że rozwiązuje to również pytanie dotyczące pierwszej osoby. Chociaż inni też.

Prosta łatwa do zrozumienia poprawka. <a id="someid" href="#">.</a> jako pierwsza linia w Twoim div dialogu.

PRZYKŁAD:

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

Gdzie jest inicjowane okno dialogowe

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

Powyższe nie będzie miało żadnego skupienia, a paski przewijania pozostaną na górze, gdzie należy. <a>Dostaje ostrość, ale jest to ukryty. Zatem ogólny efekt jest pożądany.

Wiem, że to stary wątek, ale jeśli chodzi o dokumentację interfejsu użytkownika, nie ma na to poprawki. To nie wymaga rozmycia ani ostrości do działania. Nie jestem pewien, czy jest najbardziej elegancki. Ale to ma sens i jest łatwe do wyjaśnienia każdemu.

Jeśli masz tylko jedno pole w postaci okna dialogowego Jquery i to jest to, które wymaga Datepicker, możesz też po prostu ustawić fokus na przycisku Zamknij (krzyżyk) w pasku tytułowym okna dialogowego:

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

Wywołaj to PO zainicjowaniu okna dialogowego, np .:

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

Ponieważ przycisk zamykania jest renderowany po .dialog()wywołaniu.

Jeśli używasz przycisków dialogowych, po prostu ustaw autofocusatrybut na jednym z przycisków:

$('#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>

Mam ten sam problem.

Obejście, które zrobiłem, polega na dodaniu fikcyjnego pola tekstowego u góry kontenera okna dialogowego.

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

Jak wspomniano, jest to znany błąd dotyczący interfejsu użytkownika jQuery i powinien zostać naprawiony stosunkowo szybko. Dopóki...

Oto inna opcja, więc nie musisz mieszać z tabindex:

Tymczasowo wyłącz DatePicker do momentu otwarcia okna dialogowego:

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

Pracuje dla mnie.

Zduplikowane pytanie: jak zamazać pierwsze dane wejściowe formularza po otwarciu okna dialogowego

Aby rozwinąć niektóre z poprzednich odpowiedzi (i zignorować pomocniczy aspekt wyboru daty), jeśli chcesz uniemożliwić focus()zdarzeniu skupianie się na pierwszym polu wejściowym po otwarciu okna dialogowego, spróbuj tego:

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

Miałem podobny problem i rozwiązałem go, skupiając się na oknie dialogowym po otwarciu:

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?)

Ale w moim przypadku pierwszym elementem jest kotwica, więc nie wiem, czy w twoim przypadku pozostawi on otwarty datepicker.

EDYCJA: działa tylko w IE

znaleźć w jquery.ui.js

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

i zamień na

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

jQuery 1.9 został wydany i nie wydaje się, aby był poprawiony. Próba uniemożliwienia skupienia się na pierwszym polu tekstowym przez niektóre z sugerowanych metod nie działa w wersji 1.9. Myślę, że dlatego, że metody próbują rozmazać ostrość lub przenieść ostrość po tym, jak pole tekstowe w oknie dialogowym już się wyostrzyło i wykonało swoją brudną robotę.

W dokumentacji API nie widzę niczego, co mogłoby sugerować, że coś się zmieniło pod względem oczekiwanej funkcjonalności. Wyłącz, aby dodać przycisk otwieracza ...

Miałem podobny problem. Na mojej stronie pierwsze dane wejściowe to pole tekstowe z kalendarzem jQuery UI. Drugi element to przycisk. Ponieważ data ma już wartość, ustawiam fokus na przycisku, ale najpierw dodaję wyzwalacz rozmycia w polu tekstowym. To rozwiązuje problem we wszystkich przeglądarkach i prawdopodobnie we wszystkich wersjach jQuery. Testowane w wersji 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();

});   

Jest to naprawdę ważne w przypadku smartfonów i tabletów, ponieważ klawiatura pojawia się, gdy fokus jest na wejściu. Oto, co zrobiłem, dodaj to wejście na początku div:

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

Nie działa z rozmiarem 0px. Myślę, że to nawet lepiej z prawdziwym przejrzystego obrazu, albo .pnglub .gifale nie próbowałem.

Jak dotąd działa dobrze na iPadzie.

Możesz dodać to:

...

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

...

jako pierwsze wejście: <input type="text" style="position:absolute;top:-200px" />