Verhindern Sie, dass der jQuery-UI-Dialog den Fokus auf das erste Textfeld setzt

Ich habe ein modales Dialogfeld für die jQuery-Benutzeroberfläche eingerichtet, das angezeigt wird, wenn ein Benutzer auf einen Link klickt. In diesem div-Tag des Dialogfelds befinden sich zwei Textfelder (der Kürze halber zeige ich nur den Code für 1), und es wird in ein jQuery UI DatePicker-Textfeld geändert, das auf den Fokus reagiert.

Das Problem ist, dass der jQuery-UI-Dialog ('Öffnen') irgendwie das erste Textfeld auslöst, das den Fokus hat, wodurch der Datumsauswahlkalender sofort geöffnet wird.

Daher suche ich nach einer Möglichkeit, um zu verhindern, dass der Fokus automatisch erfolgt.

<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 listet Ticket 4731 als behoben auf.

Es sieht so aus, als ob focusSelector nicht implementiert wurde, sondern stattdessen eine kaskadierende Suche nach verschiedenen Elementen verwendet wurde. Aus dem Ticket:

Erweitern Sie den Autofokus, beginnend mit [Autofokus], und dann: tabellarischer Inhalt, dann Schaltflächenbereich, dann Schaltfläche schließen und dann Dialog

Markieren Sie also ein Element mit dem autofocusAttribut und das ist das Element, das den Fokus erhalten soll:

<input autofocus>

In der Dokumentation wird die Fokuslogik erläutert (direkt unter dem Inhaltsverzeichnis unter dem Titel 'Fokus'):

Beim Öffnen eines Dialogfelds wird der Fokus automatisch auf das erste Element verschoben, das den folgenden Elementen entspricht:

1. Das erste Element im Dialog mit dem autofocusAttribut
2. Das erste :tabbableElement im Inhalt des Dialogfelds
3. Das erste :tabbableElement im Schaltflächenbereich des Dialogfelds
4. Die Schaltfläche zum Schließen des Dialogfelds
5. Der Dialog selbst

Fügen Sie eine versteckte Spanne darüber hinzu und verwenden Sie ui-helper-hidden-Access, um sie durch absolute Positionierung auszublenden. Ich weiß, dass Sie diese Klasse haben, weil Sie den Dialog von jquery-ui verwenden und er in jquery-ui ist.

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

In jQuery UI> = 1.10.2 können Sie die _focusTabbablePrototypmethode durch eine Placebo-Funktion ersetzen :

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

Geige

Dies wirkt sich auf alle dialogs auf der Seite aus, ohne dass jedes manuell bearbeitet werden muss.

Die ursprüngliche Funktion setzt lediglich den Fokus auf das erste Element mit autofocusAttribut / tabbableElement / oder greift auf den Dialog selbst zurück. Da bei der Verwendung nur der Fokus auf ein Element gelegt wird, sollte es kein Problem geben, es durch ein Element zu ersetzen noop.

Ab jQuery UI 1.10.0 können Sie mithilfe des Autofokus des HTML5-Attributs auswählen, auf welches Eingabeelement Sie sich konzentrieren möchten .

Sie müssen lediglich ein Dummy-Element als erste Eingabe im Dialogfeld erstellen. Es wird den Fokus für Sie absorbieren.

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

Dies wurde am 7. Februar 2013 in Chrome, Firefox und Internet Explorer (alle neuesten Versionen) getestet.

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

Ich fand den folgenden Code die jQuery UI Dialogfunktion zum Öffnen.

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

Sie können entweder das jQuery-Verhalten umgehen oder das Verhalten ändern.

tabindex -1 dient als Problemumgehung.

Ich habe es gerade herausgefunden, während ich herumgespielt habe.

Ich habe mit diesen Lösungen festgestellt, dass das Entfernen des Fokus dazu führte, dass der ESCSchlüssel nicht mehr funktionierte (dh den Dialog schloss), als ich zum ersten Mal in den Dialog ging.

Wenn das Dialogfeld geöffnet wird und Sie sofort drücken ESC, wird das Dialogfeld nicht geschlossen (sofern Sie dies aktiviert haben), da der Fokus auf einem versteckten Feld oder etwas anderem liegt und keine Tastendruckereignisse angezeigt werden.

Die Art und Weise, wie ich es behoben habe, bestand darin, dies dem offenen Ereignis hinzuzufügen, um stattdessen den Fokus aus dem ersten Feld zu entfernen:

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

Dadurch wird der Fokus auf das Dialogfeld gelegt, das nicht sichtbar ist, und dann ESCfunktioniert die Taste.

Setzen Sie den Tabindex der Eingabe auf -1 und setzen Sie dann dialog.open, um Tabindex wiederherzustellen, falls Sie es später benötigen:

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

Meine Problemumgehung:

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

Ich hatte Inhalte, die länger waren als der Dialog. Beim Öffnen würde der Dialog zum ersten scrollen: tabbable, das sich unten befand. Hier war mein Fix.

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

Einfache Problemumgehung:

Erstellen Sie einfach ein unsichtbares Element mit tabindex = 1 ... Dadurch wird der Datepicker nicht fokussiert ...

z.B.:

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

Hier ist die Lösung, die ich implementiert habe, nachdem ich das jQuery UI-Ticket Nr. 4731 gelesen habe, das ursprünglich von slolife als Antwort auf eine andere Antwort veröffentlicht wurde. (Das Ticket wurde auch von ihm erstellt.)

Fügen Sie zunächst bei jeder Methode, mit der Sie Autocompletes auf die Seite anwenden, die folgende Codezeile hinzu:

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

Dadurch wird das "Autofokus" -Verhalten von jQuery deaktiviert. Um sicherzustellen, dass Ihre Site weiterhin allgemein zugänglich ist, schließen Sie Ihre Methoden zur Dialogerstellung so ein, dass zusätzlicher Code hinzugefügt werden kann, und fügen Sie einen Aufruf hinzu, um das erste Eingabeelement zu fokussieren:

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

}

Um die Zugänglichkeit weiter zu verbessern, wenn Optionen für die automatische Vervollständigung über die Tastatur ausgewählt werden, überschreiben wir den Rückruf für die automatische Vervollständigung der jQuery-Benutzeroberfläche und fügen zusätzlichen Code hinzu, um sicherzustellen, dass das textElement nach einer Auswahl in IE 8 nicht den Fokus verliert.

Hier ist der Code, mit dem wir Autocompletes auf Elemente anwenden:

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

Sie können diese Option bereitstellen, um stattdessen die Schaltfläche zum Schließen zu fokussieren.

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

Dies kann ein Browserverhalten sein, das kein Problem mit dem jQuery-Plugin darstellt. Haben Sie versucht, den Fokus programmgesteuert zu entfernen, nachdem Sie das Popup geöffnet haben?

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

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

    return false;
});

Habe das nicht getestet, sollte aber gut funktionieren.

Ich hatte das gleiche Problem und löste es, indem ich vor dem Datepicker eine leere Eingabe einfügte, die bei jedem Öffnen des Dialogfelds den Fokus stiehlt. Diese Eingabe wird bei jedem Öffnen des Dialogfelds ausgeblendet und beim Schließen erneut angezeigt.

Nun, es ist cool, dass im Moment niemand die Lösung gefunden hat, aber es sieht so aus, als hätte ich etwas für dich. Die schlechte Nachricht ist, dass der Dialog auf jeden Fall den Fokus erfasst, auch wenn keine Eingaben und Links vorhanden sind. Ich benutze den Dialog als Tooltip und brauche definitiv den Fokus, um im ursprünglichen Element zu bleiben. Hier ist meine Lösung:

benutze die Option [autoOpen: false]

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

Während der Dialog unsichtbar ist, wird der Fokus nirgendwo gesetzt und bleibt an der ursprünglichen Stelle. Es funktioniert für QuickInfos mit nur einem einfachen Text, wurde jedoch nicht für funktionalere Dialoge getestet, bei denen es möglicherweise wichtig ist, dass der Dialog beim Öffnen sichtbar ist. Wird wahrscheinlich auf jeden Fall gut funktionieren.

Ich verstehe, dass der ursprüngliche Beitrag nur dazu diente, den Fokus nicht auf das erste Element zu richten, aber Sie können leicht entscheiden, wo der Fokus liegen soll, nachdem der Dialog geöffnet wurde (nach meinem Code).

Getestet in IE, FF und Chrome.

Hoffentlich hilft das jemandem.

Meiner Meinung nach ist diese Lösung sehr schön:

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

Hier zu finden: Autofokus im UI-Dialog kann nicht entfernt werden

Ich habe ein ähnliches Problem. Ich öffne einen Fehlerdialog, wenn die Validierung fehlschlägt und der Fokus erfasst wird, so wie Flugan ihn in seiner Antwort zeigt . Das Problem ist, dass der Dialog selbst fokussiert ist, auch wenn kein Element im Dialogfeld tabellierbar ist. Hier ist der ursprüngliche nicht minimierte Code aus 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();

Der Kommentar gehört ihnen!

Das ist aus mehreren Gründen wirklich schlecht für mich. Das Ärgerlichste ist, dass die erste Reaktion des Benutzers darin besteht, die Rücktaste zu drücken, um das letzte Zeichen zu löschen. Stattdessen wird er aufgefordert, die Seite zu verlassen, da die Rücktaste außerhalb eines Eingabesteuerelements gedrückt wird.

Ich fand, dass die folgende Problemumgehung für mich ziemlich gut funktioniert:

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

Ich habe mich nach einem anderen Thema umgesehen, aber aus demselben Grund. Das Problem ist, dass der Dialog den Fokus auf den ersten <a href="">.</a>findet , den er findet. Wenn Sie also viel Text in Ihrem Dialogfeld haben und Bildlaufleisten angezeigt werden, kann es vorkommen, dass die Bildlaufleiste nach unten gescrollt wird. Ich glaube, dies behebt auch die Frage der ersten Person. Obwohl die anderen es auch tun.

Die einfache, leicht verständliche Lösung. <a id="someid" href="#">.</a> als erste Zeile in Ihrem Dialog div.

BEISPIEL:

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

Wo Ihr Dialog initiiert wird

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

Das Obige hat nichts Fokussiertes und die Bildlaufleisten bleiben oben, wo sie hingehören. Das <a>bekommt Fokus aber wird dann ausgeblendet. Der Gesamteffekt ist also der gewünschte Effekt.

Ich weiß, dass dies ein alter Thread ist, aber was die UI-Dokumente betrifft, gibt es keine Lösung dafür. Dies erfordert keine Unschärfe oder Fokussierung, um zu arbeiten. Ich bin mir nicht sicher, ob es das eleganteste ist. Aber es macht einfach Sinn und ist einfach, es jedem zu erklären.

Wenn Sie nur ein Feld in Form eines Jquery-Dialogfelds haben und dieses Datepicker benötigt, können Sie alternativ einfach den Fokus auf die Schaltfläche Schließen (Kreuz) des Dialogfelds in der Titelleiste des Dialogfelds legen :

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

Rufen Sie dies auf, nachdem der Dialog initialisiert wurde, z.

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

Weil die Schaltfläche zum Schließen nach dem .dialog()Aufruf von gerendert wird.

Wenn Sie Dialogschaltflächen verwenden, legen Sie einfach das autofocusAttribut auf einer der Schaltflächen fest:

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

Ich habe das gleiche Problem.

Die Problemumgehung, die ich durchgeführt habe, besteht darin, das Dummy-Textfeld oben im Dialogcontainer hinzuzufügen.

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

Wie bereits erwähnt, ist dies ein bekannter Fehler in der jQuery-Benutzeroberfläche und sollte relativ bald behoben werden. Bis dann...

Hier ist eine weitere Option, damit Sie sich nicht mit tabindex anlegen müssen:

Deaktivieren Sie die Datumsauswahl vorübergehend, bis das Dialogfeld geöffnet wird:

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

Funktioniert bei mir.

Doppelte Frage: So verwischen Sie die erste Formulareingabe beim Öffnen des Dialogfelds

Wenn Sie verhindern möchten, dass das focus()Ereignis beim Öffnen Ihres Dialogfelds das erste Eingabefeld fokussiert, um einige der vorherigen Antworten zu erweitern (und den zusätzlichen Aspekt der Datumsauswahl zu ignorieren) , versuchen Sie Folgendes :

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

Ich hatte ein ähnliches Problem und löste es, indem ich mich nach dem Öffnen auf den Dialog konzentrierte:

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

Aber in meinem Fall ist das erste Element ein Anker, daher weiß ich nicht, ob in Ihrem Fall der Datepicker geöffnet bleibt.

BEARBEITEN: funktioniert nur im IE

finden Sie in jquery.ui.js

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

und ersetzen durch

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

jQuery 1.9 ist veröffentlicht und es scheint keinen Fix zu geben. Der Versuch, die Fokussierung des ersten Textfelds durch einige der vorgeschlagenen Methoden zu verhindern, funktioniert in 1.9 nicht. Ich denke, weil die Methoden versuchen, den Fokus zu verwischen oder den Fokus zu verschieben, nachdem das Textfeld im Dialogfeld bereits den Fokus erhalten und seine Drecksarbeit erledigt hat.

In der API-Dokumentation ist nichts zu sehen, was mich glauben lässt, dass sich an der erwarteten Funktionalität etwas geändert hat. Aus, um einen Öffnerknopf hinzuzufügen ...

Ich hatte ein ähnliches Problem. Auf meiner Seite ist die erste Eingabe ein Textfeld mit dem jQuery UI-Kalender. Das zweite Element ist die Schaltfläche. Da das Datum bereits einen Wert hat, setze ich den Fokus auf die Schaltfläche, füge aber zuerst einen Auslöser für die Unschärfe im Textfeld hinzu. Dies löst das Problem in allen Browsern und wahrscheinlich in allen Versionen von jQuery. Getestet in Version 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();

});   

Dies ist für Smartphones und Tablets sehr wichtig, da die Tastatur angezeigt wird, wenn eine Eingabe den Fokus hat. Dies ist, was ich getan habe, fügen Sie diese Eingabe am Anfang des div hinzu:

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

Funktioniert nicht mit Größe 0px. Ich denke , es ist noch besser , mit einem echten transparenten Bild, entweder .pngoder .gifaber ich habe nicht versucht.

Funktioniert bisher gut im iPad.

Sie können dies hinzufügen:

...

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

...

als erste Eingabe: <input type="text" style="position:absolute;top:-200px" />