So legen Sie mit JQuery den Fokus auf das Eingabefeld fest

106

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>

Wie setze ich den Fokus auf das Eingabefeld in der Seite? .bottom Div, wenn ein Benutzer auf den Link im .topDiv klickt ?

Ich lasse das .bottomDiv derzeit erfolgreich beim Klicken mit dem folgenden JQuery-Code erscheinen, kann aber nicht herausfinden, wie der Fokus gleichzeitig auf das Eingabefeld gesetzt werden kann.

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

Vielen Dank!

jquery html rollender Stein
quelle

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

Simshaun

@simshaun zu welcher Seite navigieren?

Rolling Stone

Wenn Sie in Ihrem Beispiel auf diesen Link klicken, wird er zu example.com weitergeleitet .

Simshaun

Oh, das stimmt, danke für das Heads-up!

Rolling Stone

Antworten:

135

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

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

Justin Ethier
quelle

Leerzeichen zwischen input& :first. Spleißt jQuery das automatisch? Ich habe immer gedacht, dass es sein sollte input:first.

Simshaun

Ja, Sie können es so oder so schreiben. Ich nehme an, es input:firstkönnte die formellere Art sein, es zu schreiben, obwohl es einfacher zu sein scheint, es anders zu lesen. Aber vielleicht bin das nur ich :)

Justin Ethier

Ich denke, weil ich so daran gewöhnt bin, denke ich, wenn ich den Raum sehe, automatisch an "untergeordnetes Element" und es dauert eine Sekunde, um mich zu verwirren. Aber hey, das bin nur ich. Es ist cool, dass es so oder so funktioniert.

Simshaun

@justin Ich musste es tatsächlich ein wenig optimieren, damit es funktioniert. $(this).parent().siblings('div.bottom').find("input.post").focus();Aber es .find()ist der Selektor, nach dem ich gesucht habe. Interessanterweise input :firstnoch input:firstfunktioniert.

Rolling Stone

Interessant, wahrscheinlich weil sich die Eingabe innerhalb eines formTags befindet. Wie auch immer, ich bin froh, dass du zur Arbeit gehst!

Justin Ethier

Wenn sich die Eingabe zufällig in einem modalen Bootstrap-Dialog befindet, ist die Antwort anders. Kopieren von So legen Sie den Fokus auf die erste Texteingabe in einem Bootstrap-Modal fest, nachdem Folgendes gezeigt wurde :

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

Kevin Buchs
quelle

Justins Antwort hat bei mir nicht funktioniert (Chrom 18, Firefox 43.0.1). jQuery's .focus()erstellt eine visuelle Hervorhebung, aber der Textcursor wird nicht im Feld angezeigt (jquery 3.1.0).

Inspiriert von https://www.sitepoint.com/jqueryhtml5-input-focus-cursor-positions/ habe ich dem Eingabefeld und voila ein Autofokus- Attribut hinzugefügt!

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

MKaama
quelle

Hat für mich gearbeitet. Die einfachere Version sieht folgendermaßen aus: $ ('. Class input'). Focus (); $ ('. class input'). prop ('Autofokus');

Existenzberechtigung