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

156

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>
Slolife
quelle
es wird sogar auf ein Bild fokussiert! sowohl zu regulären <img> -Tags als auch zu <input type = image>
Simon_Weaver

Antworten:

78

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
Slolife
quelle
Wofür ist die Ablehnung? Wenn es daran lag, dass ich 1.9 als Fixversion aufgeführt habe, habe ich auf 1.10 aktualisiert, um mit dem Ticket übereinzustimmen.
Slolife
1
Ich schaue mir die jquery-ui 1.10-Dokumentation für Dialog an und sehe sie nicht. Ich habe in der API nach "focusSelector" gesucht und es ist nicht da.
Paul Tomblin
3
Wenn Sie den Fokus auf ein Element außerhalb des Bildschirms setzen, wird das Fenster nach oben oder unten zu diesem Element verschoben. Dies geschieht immer dann, wenn das Fenster fokussiert wird, nicht nur beim Öffnen des Dialogfelds. Wenn ich Firebug verwende, um "Elemente zu untersuchen" und dann im Dokumentfenster zurückklicke, scrollt mein Fenster nach oben oder unten zu dem Element, auf das sich jQuery-UI konzentriert. Die Frage ist nicht, wie man wählt, welches Element fokussiert wird, sondern wie man den Fokus verhindert . Die Auswahl eines anderen Elements zur Fokussierung würde das Problem nicht lösen.
Vladimir Kornea
4
Die Idee, dass jQuery UI dies als "behoben" ansieht, ist verrückt. Die Lösung ist zu entfernen , jede insgesamt Autofokus - Logik. Ich habe Sie gebeten, einen Dialog zu öffnen und sich nicht auf eine Eingabe zu konzentrieren. So nervig.
AJB
2
fwiw, ich habe eine Eingabe w / type = "hidden" über der ersten Eingabe hinzugefügt und ein Autofokus-Attribut hinzugefügt. Es bedeutet nicht, was Sie denken, dass es bedeutet, aber es funktioniert, um dieses Problem zu beheben.
Jinglesthula
77

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>
Patrick Lee Scott
quelle
1
Tolle Arbeit. Kein js erforderlich, ändert das Layout nicht und jquery ui unterstützt es nativ.
Steampowered
Stimmen Sie zu, großartige Arbeit. Auch schön über versteckte zugängliche Klasse zu wissen! Vielen Dank!!
user1055761
4
Dies verursacht Probleme für Menschen, die unterstützende Technologie verwenden (z. B. Bildschirmleser)
rink.attendant.6
1
@ rink.attendant.6 welche Probleme?
Oxfn
erstaunliche Lösung
Pedro Coelho
63

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.

Fabrício Matté
quelle
7
Stunden und Stunden und Stunden und Stunden brannten darauf. Mein Kunde dankt Ihnen.
Lamarant
1
Dies sollte die Antwort sein!
Briansol
2 Tage nach diesen Lösungen gesucht ... nichts anderes hat funktioniert ... Vielen Dank!
Legionär
1
Warnung: Wenn das Dialogfeld angezeigt wird, wird das Dialogfeld durch Drücken der Escape-Taste nicht geschlossen (bis Sie das Dialogfeld fokussieren).
Robert
1
@Robert, anstatt es durch zu $.noopersetzen, ersetzen Sie es durch eine Funktion, die den aktiven Dialog notiert, und registrieren Sie dann einen globalen Schlüsselereignishandler, der ESCden 'aktiven' Dialog abfängt und schließt, falls vorhanden.
Perkins
28

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

Seidenfeuer
quelle
27

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.


quelle
1
Wird mich tabindex = -1 nicht daran hindern, in das Textfeld zu tippen?
Slolife
2
Danke für die Recherche. Jetzt weiß ich, dass es der tatsächliche Code ist, der es tut. Ich könnte dem jQuery-UI-Team einen Vorschlag machen, eine Option zum Deaktivieren dieses Autofokus hinzuzufügen.
Slolife
3
@slolife - Es tut uns leid, diesen wirklich alten Thread wiederzubeleben, aber dieses Ticket besagt, dass das focusSelectorUpdate (die Option) in jQueryUI 1.8 enthalten sein soll, und wir sind jetzt bei 1.8.13 und ich sehe es nicht in den jQueryUI-Dialogdokumenten . Was ist damit passiert?
Tom Hamming
Keine Ursache. Ich hatte in der Änderungshistorie gesehen, dass "Meilenstein von TBD auf 1,8 geändert wurde", und hatte nicht bemerkt, dass oben tatsächlich 1,9 steht.
Tom Hamming
Ich habe ein ähnliches Problem, meine Problemumgehung wird hier beschrieben - stackoverflow.com/a/12250193/80002
markieren Sie den
15

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.

Rob Donovan
quelle
3
Dies scheint die einzige funktionierende Lösung zu sein, die nicht das Hinzufügen von nutzlosem HTML, das Entfernen von Tabindex oder das Brechen des ESC-Schlüssels umfasst.
Bojan Bedrač
10

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");
        }
    });
});
rotes Quadrat
quelle
4
Wird mich tabindex = -1 nicht daran hindern, in das Textfeld zu tippen?
Slolife
1
Sie könnten ein setTimeout verwenden, um den Tabindex zurückzusetzen, nachdem der Dialog angezeigt wird
redsquare
10

Meine Problemumgehung:

open: function(){
  jQuery('input:first').blur();
  jQuery('#ui-datepicker-div').hide();
},  
Thomas
quelle
+1. Funktioniert wie ein Zauber mit :firstSelector oder .first()in FF / Chrome / IE9. Das Werfen in die dialogopenBindung funktioniert auch.
Nickb
Dieser hat mich auch dorthin gebracht. Außer bei mir hatte mein Dialog überhaupt keine Eingaben und der erste Link wurde fokussiert ... also habe ich diese Option zu meinem jQuery-Dialog hinzugefügt:open: function(){ $('a').blur(); // no autofocus on links }
Marcus
8

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); }
});
der Werkzeugmann
quelle
Das hat bei mir funktioniert, aber ich habe verwendet, $('...').blur();anstatt zu scrollen.
Jawa
4
Mein Inhalt war auch sehr lang. Unschärfe entfernte die Auswahl, ließ aber den Dialog nach unten scrollen. scrollTop hat den Inhalt nach oben gescrollt, aber die Auswahl verlassen. Am Ende habe ich $ ('...') verwendet. Blur (); $ (this) .scrollTop (0); arbeitete wie ein Champion.
7

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
Andy
quelle
Funktioniert gut in IE9 und Firefox, aber nicht in Safari / Chrom.
Tuseau
3

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

quelle
2

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

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

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.

RaYell
quelle
1
Leider funktioniert das nicht. Ich bin mir nicht sicher, ob es sich um eine IE-Sache oder eine JQuery-UI-Sache handelt. Aber selbst wenn Sie den Fokus programmgesteuert auf etwas anderes verschieben, bleibt der Kalender geöffnet.
Patricia
1

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.

Manuel Leuenberger
quelle
1

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.

Roc
quelle
1

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);
};
Kennzeichen
quelle
Dies kann erweitert werden, um nur bestimmte Dialoge zu beeinflussen, indem Sie die Option 'dialogClass' in .dialog () verwenden und dann Folgendes ändern: Nicht filtern, um Ihre Klasse einzuschließen. zB: nicht (.ui-dialog.myDialogClass)
Andrew Martinez
1

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.

MikeF
quelle
1

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.

mikhail-t
quelle
1

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>

Sam
quelle
0

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;" />
TTCG
quelle
0

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

BMiner
quelle
0

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(); }
});
Nickb
quelle
0

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

daniloquio
quelle
0

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();
user1443069
quelle
0

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

pixelda
quelle
Das Update wurde jetzt laut jQuery-Ticket auf 1.10 verschoben
slolife
0

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

});   

user1698635
quelle
0

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.

Ángel Arbeteta
quelle
-1

Sie können dies hinzufügen:

...

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

...

Khofidin Ofid
quelle
3
Er fragt, wie man den Fokus verhindert und nicht den Fokus hinzufügt.
CBarr
-2

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

user2816796
quelle