it-swarm.com.de

Wie man den automatischen Fokus auf das erste Eingabefeld, wenn Sie ein HTML-Formular als JQuery-Dialogfeld öffnen

Ich habe ähnliche Fragen zu SO gesehen, darunter dieses , das alt ist. Ich habe Links gelesen und verfolgt, aber es ist unklar, ob es heute eine richtige Lösung für dieses Problem gibt.

Meine unterste Frage ist, dass ich placeholder="..." in den Eingabefeldern von HTML verwende. Durch das automatische Fokussieren auf das erste Feld ist der Platzhalter für den Benutzer nicht mehr sichtbar.

EDIT

Hier ist mein HTML-Code:

<div id='LOGIN_FORM' title="Login">
    <form action="">
        <input type="text" name="login_id" required="required"
                           placeholder="Enter user ID" /><br />
        <input type="password" name="login_pwd" required="required"
                           placeholder="Enter password" /><br />
    </form>
</div>

Hier ist mein JS-Code:

$("#login").click(function() { 
    $("#LOGIN_FORM").dialog({ modal: true }, { buttons: [
    {
            text: "Ok",
            click: function() { $(this).dialog("close"); }
        }
    ] });
});
21

Eine Lösung ist, tabindex="-1" in den Eingabefeldern ALL festzulegen, um HTML-Platzhalter sichtbar zu halten.

5

Was ich getan habe, war, dass ich eine zusätzliche Eingabe erstellt und diese unsichtbar gemacht hat (style="display:none"), dann die Eigenschaft autofocus="true" an das Ende Ihres Dialoginhalts gesetzt hat, damit es sich nicht mit irgendetwas beschäftigt. es sollte so aussehen:

        <div><!--dialog div-->
           <button></button>
           <button></button> 
          <input type="hidden" autofocus="true" />
        </div>
16

Das Hinzufügen dieses Tags als erstes Eingabefeld auf der Seite funktioniert für mich.

<input type="text" autofocus="autofocus" style="display:none" />

Sie brauchen kein Javascript und behalten die Tab-Reihenfolge bei, wenn Sie die Tab-Taste verwenden möchten, um sich durch die Felder zu bewegen.

(Getestet auf Chrome> 65, Firefox> 59 und Edge)

6
Mike

Ich endete damit:

<input type="text" style="position: fixed; left: -10000000px;" disabled/>
6
Robert

Sie können jquery verwenden: 

jQuery(document).ready(function(e) {
   $('input[name="login_id"]').blur(); 
});

Wenn Sie den Fehler nicht finden können, warum der Autofokus in Ihr erstes Eingabefeld des Formulars eingestellt ist Stellen Sie sicher, dass Sie diesen Code vor dem </body> body-Tag Ihres Dokuments einfügen.

1
Felix Jr