it-swarm.com.de

Setzen Sie den Fokus auf das Feld in dynamisch geladenen DIV

Was ist die richtige Methode, um den Fokus auf ein bestimmtes Feld in einem dynamisch geladenen DIV zu setzen?

$("#display").load("?control=msgs"); // loads the HTML into the DIV
$('#display').fadeIn("fast"); // display it
$("tex#header").focus();          // ?? neither that
$("input#header").focus();        // ?? nor that
$('#display', '#header').focus()  // ?? nor that
$("#header").focus();             // ?? nor that works

Der folgende HTML-Code wird in die Variable display DIV abgerufen:

<div id="display">
<form id="newHeaderForm" class="dataform" action="/" method="post">
    <input id="to" type="hidden" value="22" name="to"/>
    <dl>
        <dt>Header</dt>
        <dd>
            <input id="header" class="large" type="text" name="header" value="" maxlength="128"/>
        </dd>
 </form>
 </div>

Vielen, vielen Dank!

41
MrG

Die load () - Funktion ist eine asynchrone Funktion. Sie sollten den Fokus einstellen, nachdem der load () - Aufruf beendet wurde, d. H. In der Rückruffunktion von load (), da das von #header referenzierte Element sonst noch nicht vorhanden ist. Zum Beispiel: 

$("#display").load("?control=msgs", {}, function() { 
  $('#header').focus();
}); 

Ich hatte selbst Probleme mit dieser Lösung, also habe ich im Callback ein setTimeout gemacht und den Fokus im Timeout so gesetzt, dass das Element existiert.

57
Jan Willem B

Haben Sie versucht, einfach nach Id auszuwählen?

$("#header").focus();

Da IDs eindeutig sein sollten, ist kein spezifischer Selektor erforderlich.

12
Paul Suart

Ja, dies geschieht, wenn ein Element bearbeitet wird, das noch nicht existiert (einige Mitwirkende haben hier auch einen guten Punkt mit der eindeutigen ID gemacht). Ich bin auf eine ähnliche Ausgabe gestoßen. Ich muss auch ein Argument an die Funktion übergeben, die das Element bearbeitet, das bald gerendert werden soll.

Die hier angezeigte Lösung hat mir nicht geholfen. Endlich habe ich einen gefunden, der sofort funktioniert hat. Und es ist auch sehr hübsch - Schließungen.

Anstatt:

$( '#header' ).focus();
or the tempting:
setTimeout( $( '#header' ).focus(), 500 );

Versuche dies:

setTimeout( function() { $( '#header' ).focus() }, 500 );

In meinem Code, der das Argument bestanden hat, funktionierte das nicht, das Timeout wurde ignoriert:

setTimeout( alert( 'Hello, '+name ), 1000 );

Das funktioniert, das Timeout tickt:

setTimeout( function() { alert( 'Hello, '+name ) }, 1000 );

Es ist scheiße, dass w3schools es nicht erwähnt. 

Credits gehen zu: makemineatriple.com .

Hoffentlich hilft das jemandem, der hierher kommt.

Martas

8
Arta

Ob

$("#header").focus();

funktioniert nicht dann gibt es auf Ihrer Seite ein anderes Element mit der ID der Kopfzeile?

Verwenden Sie firebug, um $("#header") auszuführen, und sehen Sie, was zurückgegeben wird.

3
Bela
$("#display").load("?control=msgs", {}, function() { 
  $('#header').focus();
});

ich habe es ausprobiert, aber es funktioniert nicht. danke für Ihre Hilfe

3
xman

Wie Omu hervorgehoben hat, müssen Sie den Fokus in einer Dokumentbereitschaftsfunktion einstellen. jQuery bietet es für Sie. Und wählen Sie eine ID aus. Wenn Sie beispielsweise eine Anmeldeseite haben:

$(function() { $("#login-user-name").focus(); }); // jQuery rocks!
2
Per Lindberg

Dies läuft beim Laden der Seite ab.

<script type="text/javascript">
    $(function () {
        $("#header").focus();
    });
</script>
1
Doomsknight

Dynamisch hinzugefügte Elemente müssen dem DOM hinzugefügt werden ... clone().append() fügt es dem DOM hinzu ..., wodurch es über Jquery ausgewählt werden kann.

1
BCnuckles
$(function (){
    $('body').on('keypress','.sobitie_snses input',function(e){
        if(e.keyCode==13){
            $(this).blur();
            var new_fild =  $(this).clone().val('');
            $(this).parent().append(new_fild);
            $(new_fild).focus();
        }
    });
});

die meisten Fehler liegen darin, dass Sie ein falsches Objekt verwenden, um das Prorepty oder die Funktion festzulegen. Verwenden Sie console.log (new_fild). um zu sehen, welches Objekt Sie versuchen, das Prorepty oder die Funktion festzulegen.

0
skinny
$("#header").attr('tabindex', -1).focus();
0
ashu