Set Fokus Bereich in einem dynamisch geladen DIV

StackOverflow https://stackoverflow.com/questions/1433742

  •  07-07-2019
  •  | 
  •  

Frage

Was ist die richtige Methode zum festlegen des Fokus auf ein bestimmtes Feld innerhalb einer dynamisch geladenen DIV?

$("#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

Die folgenden HTML-geholt wird, in die display DIV:

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

War es hilfreich?

Lösung

Die Last () Funktion ist eine asynchrone Funktion. Sie sollten den Fokus, nachdem die Last () -Aufruf beendet gesetzt, dass in der Callback-Funktion der Last ist (), da sonst das Element, das Sie durch #header Bezugnahme auf sind, gibt es noch nicht. Zum Beispiel: 

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

Ich hatte Probleme, mich selbst mit dieser Lösung, so habe ich eine SetTimeout in den Rückruf und den Fokus in der Timeout / wirklich zu machen / sicher, dass das Element vorhanden ist.

Andere Tipps

Haben Sie versucht, einfach durch Id Auswahl? 

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

als Ids sehen sollte eindeutig sein, gibt es keine Notwendigkeit, einen spezifischeren Selektor haben.

Ja, geschieht dies, wenn ein Element zu manipulieren, die noch nicht existiert (ein paar Mitwirkender hier machten auch einen guten Punkt mit der eindeutigen ID). Ich lief in ein ähnliches Problem. Ich muß auch ein Argument an die Funktion übergeben, das Element zu manipulieren bald gemacht werden.

Die Lösung abgehakt hier hat mir nicht helfen. Schließlich fand ich eine, die direkt aus der Box gearbeitet. Und es ist sehr schön, auch -. Schließungen

Statt: 

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

Versuchen Sie folgendes: 

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

In meinem Code, die Prüfung das Argument übergeben, das nicht funktionierte, wurde das Timeout ignoriert: 

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

Das funktioniert, das Timeout tickt: 

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

Es saugt, dass w3schools es nicht erwähnen.

Impressum finden Sie unter: makemineatriple. com .

Ich hoffe, das hilft jemand, der hierher kommt.

Martas 

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

habe ich versucht, es aber es nicht funktioniert, bitte geben Sie mir mehr Beratung, dieses Problem zu lösen. Danke für Ihre Hilfe

Wenn 

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

funktioniert nicht, dann gibt es ein weiteres Element auf Ihrer Seite mit dem ID-Header?

Mit Firebug laufen $("#header") und sehen, was es gibt.

Wie Omu wies darauf hin, müssen Sie den Fokus in einem Dokument-Ready-Funktion eingestellt. jQuery bietet es für Sie. Und auf einer ID aus. Zum Beispiel, wenn Sie eine Login-Seite haben: 

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

Dies läuft auf Seite zu laden. 

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

Dynamisch hinzugefügten Elemente müssen DOM hinzugefügt werden ... clone().append() es auf das DOM fügt ..., die es ermöglicht, über jquery ausgewählt werden. 

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

$(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 sind, weil U verwenden des falschen Objekts zu setzen, der prorepty oder Funktion.Verwenden Sie dazu die Konsole.log(new_fild);um zu sehen, um was für ein Objekt U versuchen, die prorepty oder Funktion.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top