So setzen Sie den Fokus auf das Eingabefeld mit JQuery

Lesezeit: 4 Minuten

Bei folgender HTML-Struktur:

<div class="wrapper">
    <div class="top">
        <a href="http://example.com" class="link">click here</a>
    </div>
    <div class="middle">
        some text
    </div>
    <div class="bottom">
        <form>
            <input type="text" class="post">
            <input type="submit">
        </form>
    </div>
<div>

was auf der seite mehrfach wiederholt wird, wie setze ich den fokus auf das eingabefeld in der .bottom div, wenn ein Benutzer auf den Link in der klickt .top div?

Ich mache gerade die .bottom div wird beim Klicken mit dem folgenden JQuery-Code erfolgreich angezeigt, scheint aber nicht herauszufinden, wie der Fokus gleichzeitig auf das Eingabefeld gesetzt werden kann.

$('.link').click(function() {
    $(this).parent().siblings('div.bottom').show();
});

Vielen Dank!

Ihre Frage ist beantwortet, aber auch: Ich gehe davon aus, dass Sie auch ausführen return false; am Ende des Ereignisrückrufs? Oder function(e) { e.preventDefault(); ..... }? Wenn nicht, navigiert Ihr Browser einfach zu dieser Seite, nachdem er den Rückruf ausgeführt hat.

– simshaun

18. Juli 2011 um 20:13 Uhr
@simshaun navigiere zu welcher Seite?

– rollender Stein

18. Juli 2011 um 20:27 Uhr
Nun, in Ihrem Beispiel würde es zu gehen, wenn Sie auf diesen Link klicken beispiel.com.

– simshaun

18. Juli 2011 um 20:33 Uhr
oh, stimmt, danke für den Hinweis!

– rollender Stein

18. Juli 2011 um 20:37 Uhr

Justin Ether

Versuchen Sie dies, um den Fokus auf das erste Eingabefeld zu setzen:

$(this).parent().siblings('div.bottom').find("input.post").focus();

Zwischenraum input & :first. Spleißt jQuery das automatisch? Ich dachte immer, es sollte sein input:first.

– simshaun

18. Juli 2011 um 20:11 Uhr
Ja, man kann es so oder so schreiben. Ich nehme an input:first könnte die formellere Art sein, es zu schreiben, obwohl es einfacher erscheint, es anders zu lesen. Aber vielleicht bin das nur ich 🙂

– Justin Ethier

18. Juli 2011 um 20:17 Uhr
Ich denke, weil ich so daran gewöhnt bin, denke ich automatisch an “untergeordnetes Element”, wenn ich den Raum sehe, und es dauert eine Sekunde, bis ich mich entwirre. Aber hey, das bin nur ich. Cool, dass es so oder so funktioniert.

– simshaun

18. Juli 2011 um 20:19 Uhr
@justin Ich musste es tatsächlich ein wenig optimieren, damit es funktioniert: $(this).parent().siblings('div.bottom').find("input.post").focus(); aber .find() ist der Selektor, nach dem ich gesucht habe. Interessant input :first Noch input:first hat funktioniert.

– rollender Stein

18. Juli 2011 um 20:26 Uhr
Interessant, wahrscheinlich weil die Eingabe innerhalb von a liegt form Schild. Wie auch immer, ich bin froh, dass du es zur Arbeit gehst!

– Justin Ethier

18. Juli 2011 um 20:27 Uhr

Wenn sich die Eingabe zufällig in einem modalen Bootstrap-Dialog befindet, ist die Antwort anders. Kopieren von Wie man den Fokus auf die erste Texteingabe in einem Bootstrap-Modal setzt, nachdem gezeigt wurde, dass dies erforderlich ist:

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

Nett! Genau das, was ich brauchte, und habe ein paar Stunden lang debuggt, Verzögerungen und alle möglichen Hacks ausprobiert … 🙂

– Kim Lundberg Stegenborg Madsen

21. August 2020 um 21:05 Uhr
Vergessen Sie auch nicht, dies unter document.ready oder etwas Äquivalentes (form load event) einzufügen.

– Baz Guvenkaya

19. Mai 2021 um 2:34 Uhr

MKaama

Justins Antwort hat bei mir nicht funktioniert (Chromium 18, Firefox 43.0.1). jQuerys .focus() erstellt eine visuelle Hervorhebung, aber der Textcursor erscheint nicht im Feld (jquery 3.1.0).

Inspiriert von https://www.sitepoint.com/jqueryhtml5-input-focus-cursor-positions/ Ich fügte hinzu Autofokus Attribut in das Eingabefeld und voila!

function addfield() {
    n=$('table tr').length;
    $('table').append('<tr><td><input name=field'+n+' autofocus></td><td><input name=value'+n+'></td></tr>');
    $('input[name="aa"'+n+']').focus();
}

Hat für mich funktioniert. Eine einfachere Version sieht so aus: $(‘.class input’).focus(); $(‘.class input’).prop(‘autofocus’);

– ejntaylor

25. Juli 2017 um 10:55 Uhr

//$GLOBALS['sitename'] is our domain site URL
//$_GET['s'] is the search parameter of our search, and we want to highlight that term searched...    
jQuery(document).ready(function($){  
        let loc=location.href;
        switch(loc) 
        {

    case "<?php echo $GLOBALS['sitename'] ?>?s=<?php echo $_GET['s'] ?>":       
        {       
        let searchf= $("form.search-form").find("input[type="search"]:first");
//searchf.val('').focus();      
//empty the value to allow a new search and focus on the field....this works but better to highlight the searched term to allow the user to decide if want to type in something else or just hit again search. In case we want to empty the searched term 
           setTimeout(function (){
           searchf.delay(1000).focus().select(); 
           }, 1000);    
        break;
//.... end of relevant code 
        }

13112400cookie-checkSo setzen Sie den Fokus auf das Eingabefeld mit JQuery

#Abfrage #html