Wie vermeiden Sie den automatischen Fokus auf das erste Eingabefeld, wenn Sie ein HTML -Formular als JQuery -Dialog erhalten?

Question

Ich habe ähnliche Fragen zu so gesehen, einschließlich Dieses hier, was alt ist. Ich habe Links gelesen und befolgt, aber es ist unklar, ob es heute eine richtige Lösung für dieses Problem gibt.

Mein unteres Problem ist, dass ich HTMLs verwende placeholder="..." Auf den Eingangsfeldern. Indem er sich automatisch auf das erste Feld konzentriert, ist sein Platzhalter für den Benutzer nicht mehr sichtbar.

BEARBEITEN

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"); }
        }
    ] });
});

Answer 1

Eine Lösung ist einzustellen tabindex="-1" an ALLE Eingabefelder, um HTML -Platzhalter sichtbar zu halten.

Answer 2

Was ich tat, war eine zusätzliche Eingabe und machte es unsichtbar (style="display:none") dann gab es ihm das Eigentum autofocus="true" Setzen Sie dies am Ende Ihres Dialoginhalts ein, damit es mit nichts spielt. es sollte so aussehen:

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

Answer 3

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

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

Sie müssen nicht JavaScript benötigen, und behält die Registerkarte, wenn Sie die Registerkartenschlüssel verwenden möchten, um sich durch die Felder zu bewegen.

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

Answer 4

Am Ende habe ich das gemacht:

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

Answer 5

Sie können JQuery verwenden:

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

Wenn Sie es schwer finden, den Fehler zu verfolgen, warum Autofokus in Ihr erstes Eingabefeld des Formulars eingestellt wird. Stellen Sie sicher, dass Sie diesen Code vor dem Schließen einfügen </body> Körpermarke Ihres Dokuments.

Answer 6

Ohne JQuery und JavaScript können wir eine CSS-Lösung geben.

1. Entfernen Sie alle Umrisse des Fokus

   :focus {
       outline: 0;
   }
   

2. Fügen Sie den Umriss des neuen Fokus hinzu

   :link:focus, :visited:focus {
       outline: none;
   }