$ .focus () funktioniert nicht

Das letzte Beispiel in der focus()Dokumentation von jQuery lautet

$('#id').focus()

sollte die Eingabe fokussieren (aktiv) machen. Ich kann das scheinbar nicht zum Laufen bringen.

Selbst in der Konsole auf dieser Site versuche ich es für das Suchfeld

$('input[name="q"]').focus()

und ich bekomme nichts. Irgendwelche Ideen?

Das Beispiel, das Sie für die Fokussierung auf diese Site gegeben haben, funktioniert einwandfrei, solange Sie sich nicht auf die Konsole konzentrieren. Der Grund, warum das nicht funktioniert, ist einfach, dass es den Fokus nicht von der Entwicklungskonsole stiehlt. Wenn Sie den folgenden Code in Ihrer Konsole ausführen und anschließend schnell in Ihr Browserfenster klicken, wird das Suchfeld fokussiert:

setTimeout(function() { $('input[name="q"]').focus() }, 3000);

Was Ihren anderen betrifft, so hat mich in der Vergangenheit nur die Reihenfolge der Ereignisse in Schwierigkeiten gebracht. Sie können focus () nicht für ein Element aufrufen, das nicht an das DOM angehängt wurde. Wurde das Element, auf das Sie sich konzentrieren möchten, bereits mit dem DOM verknüpft?

An anderer Stelle im Internet eine Lösung gefunden ...

$('#id').focus();

funktioniert nicht.

$('#id').get(0).focus();

funktionierte.

Einige der Antworten hier schlagen vor setTimeout, den Prozess der Fokussierung auf das Zielelement zu verzögern. Einer von ihnen erwähnt, dass sich das Ziel in einem modalen Dialog befindet. Ich kann die Richtigkeit der setTimeoutLösung nicht weiter kommentieren, ohne die genauen Einzelheiten zu wissen, wo sie verwendet wurde. Ich dachte jedoch, ich sollte hier eine Antwort geben, um Menschen zu helfen, die genau wie ich auf diesen Thread stoßen

Die einfache Tatsache ist, dass Sie sich nicht auf ein Element konzentrieren können, das noch nicht sichtbar ist . Wenn Sie auf dieses Problem stoßen, stellen Sie sicher, dass das Ziel tatsächlich sichtbar ist, wenn versucht wird, es zu fokussieren. In meinem Fall habe ich etwas in diese Richtung getan

$('#elementid').animate({left:0,duration:'slow'});
$('#elementid').focus();

Das hat nicht funktioniert. Ich habe nur realisiert , was los war , als ich ausgeführt $ ( ‚# elementID‘). Focus () `von der Konsole , die tat Arbeit. Der Unterschied: In meinem Code über dem Ziel gibt es keine Gewissheit, dass das Ziel tatsächlich sichtbar ist, da die Animation möglicherweise nicht vollständig ist . Und da liegt der Hinweis

$('#elementid').animate({left:0,duration:'slow',complete:focusFunction});

function focusFunction(){$('#elementid').focus();}

funktioniert wie erwartet. Auch ich hatte anfangs eine setTimeoutLösung gefunden und es hat auch funktioniert. Ein willkürlich gewähltes Zeitlimit führt jedoch dazu, dass die Lösung früher oder später unterbrochen wird, je nachdem, wie langsam das Host-Gerät den Prozess durchführt, um sicherzustellen, dass das Zielelement sichtbar ist.

Wenn Sie Bootstrap + Modal verwenden, hat dies bei mir funktioniert:

  $(myModal).modal('toggle');
  $(myModal).on('shown.bs.modal', function() {
    $('#modalSearchBox').focus()
  });

Nur für den Fall, dass jemand anderes über diese Frage stolpert und die gleiche Situation wie ich hat - ich habe versucht, den Fokus zu setzen, nachdem ich auf ein anderes Element geklickt habe, aber der Fokus schien nicht zu funktionieren. Es stellte sich heraus, dass ich nur eine brauchte e.preventDefault();- hier ein Beispiel:

$('#recipients ul li').mousedown(function(e) {
    // add recipient to list
    ...
    // focus back onto the input
    $('#message_recipient_input').focus();
    // prevent the focus from leaving
    e.preventDefault();
});

Dies half:

Wenn Sie HTMLElement.focus () von einem Mousedown-Ereignishandler aus aufrufen, müssen Sie event.preventDefault () aufrufen, damit der Fokus das HTMLElement nicht verlässt. Quelle: https://developer.mozilla.org/en/docs/Web/API/HTMLElement/focus

Mir ist klar, dass dies alt ist, aber ich bin heute darauf gestoßen. Keine der Antworten funktionierte für mich. Was ich fand, war setTimeout. Ich wollte, dass mein Fokus auf die Eingabe eines Modals gelegt wird, wobei setTimeout funktioniert. Hoffe das hilft!

Ich hatte auch dieses Problem. Die Lösung, die in meinem Fall funktioniert hat, war die Verwendung der tabindex-Eigenschaft für das HTML-Element.

Ich habe ng-repeatfür einige li-Elemente in einer Liste verwendet und konnte mit .focus () den Fokus nicht auf das erste li setzen. Deshalb habe ich jedem li während der Schleife einfach das tabindex-Attribut hinzugefügt.

also jetzt <li ng-repeat="user in users track by $index" tabindex="{{$index+1}}"></li>

Der Index +1 war ab 0. Stellen Sie außerdem sicher, dass das Element im DOM vorhanden ist, bevor Sie die Funktion .focus () aufrufen

Ich hoffe das hilft.

Für diejenigen mit dem Problem, nicht zu arbeiten, weil Sie "$ (element) .show ()" verwendet haben. Ich habe es auf die nächste Weise gelöst:

 var textbox = $("#otherOption");
 textbox.show("fast", function () {
    textbox[0].focus();
  });

Sie benötigen also keinen Timer, der nach Abschluss der Show-Methode ausgeführt wird.

Fügen Sie eine Verzögerung vor dem Fokus hinzu (). 200 ms sind genug

function focusAndCursor(selector){
  var input = $(selector);
  setTimeout(function() {
    // this focus on last character if input isn't empty
    tmp = input.val(); input.focus().val("").blur().focus().val(tmp);
  }, 200);
}

Hatte dieses Problem gerade wieder und ob Sie es glauben oder nicht, alles was ich tun musste, war die Entwicklertools zu schließen. Anscheinend hat die Registerkarte "Konsole" die Fokuspriorität gegenüber dem Seiteninhalt.

Stellen Sie sicher, dass das Element und seine Eltern sichtbar sind. Sie können den Fokus nicht auf versteckte Elemente verwenden

ZUSÄTZLICHE LÖSUNG Hatte das gleiche Problem, bei dem focus () nicht zu funktionieren schien, aber schließlich stellte sich heraus, dass das Scrollen zur richtigen Position erforderlich war:

• https://stackoverflow.com/a/43342974/1335717

Für meinen Fall musste ich einen Registerkartenindex angeben ( -1wenn nur per Skript fokussierbar)

<div tabindex='-1'>
<!-- ... -->
</div>