Wie funktioniert das automatische Füllen im Browser?

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

  •  13-10-2019
  •  | 
  •  

Frage

Wie bildet sich? Autofill Arbeiten in modernen Webbrowsern? Welches sind die häufigsten Techniken, die in Browsern verwendet werden, die eine automatische Formulierung implementieren?

-- BEARBEITEN --

Die Frage bezieht sich nicht um die automatische Vervollständigung, die Form des Formulars, was sich nicht nur um die zuvor eingegebenen Werte kümmert, sondern auch die Bedeutung und Struktur des Feldes berücksichtigt. Zum Beispiel Google Chrome -Implementierung, versucht, die eingegebenen Felder zu analysieren ihren Typ und ihre Struktur erraten. Oder zumindest das, was ich aus dem oben verlinkten Code verstanden habe.

War es hilfreich?

Lösung

Schauen Sie sich an Diese Antwort von Kmote.

Highlight ist, dass der Browser das Feld des Feldes betrachtet name Tag und macht eine fundierte Vermutung, welche Art von Daten dorthin gehen würden (Regex -Matching ist eine gute naive Art, dies zu tun). Chrome arbeitet daran, eine Art Standardisierung zu erhalten, so dass dies nicht so wie ein Hit-or-Miss ist.

Andere Tipps

Unterschiedliche Technologien und Browser verwenden verschiedene Methoden, um sowohl zu berechnen, was angezeigt werden soll als auch wie sie es anzeigen, aber einige Quellen, die mancheckt, sind:

Wenn Sie es selbst implementieren (oder nur selbst verwenden), empfehlen ich dringend, sich das Plugin anzusehen.

Das erste Antwortelement ist einfach das Nicht -Standard -HTML -Formular autocomplete Attribut, das vor einigen Jahren mit Internet Explorer eingeführt wurde.

Ironischerweise können Sie hier eine gute Geschichte eine Einführung auf die Mozilla -Website lesen: Das automatische Vervollständigungsattribut und die Webdokumente mit XHTML

Diese Frage ist ziemlich alt, aber ich habe eine Aktualisierte Antwort für 2017!

Um Autocomplete auszulösen, müssen Sie es nur richtig benennen.

Die folgende Antwort stammt aus meiner ursprünglichen Antwort von hier aus: https://stackoverflow.com/a/41965106/1696153

Hier ist ein Link zum Beamten Aktueller Whatwg HTML Standard zum Aktivieren von Autocomplete.

Google schrieb a Ziemlich schöner Führer Für die Entwicklung von Webanwendungen, die für mobile Geräte freundlich sind. Sie haben einen Abschnitt, wie die Eingänge für Formulare genannt werden, um die automatische Füllung problemlos zu verwenden. Obwohl es für Mobile geschrieben wurde, gilt dies sowohl für Desktop als auch für Mobilgeräte!

So aktivieren Sie die automatische Vervollständigung in Ihren HTML -Formularen

Hier sind einige wichtige Punkte, um die automatische Vervollständigung zu aktivieren:

  • Verwenden ein <label> für alle deine <input> Felder
  • Füge hinzu ein autocomplete Attribut zu deinem <input> Tags und füllen Sie es mit diesem aus führen.
  • Nenne deinen name und autocomplete Attribute für alle korrekt <input> Stichworte

  • Beispiel:

    <label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA"
placeholder="Full name" required autocomplete="name">

<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA"
placeholder="name@example.com" required autocomplete="email">

<!-- note that "emailC" will not be autocompleted -->
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
placeholder="name@example.com" required autocomplete="email">

<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA"
placeholder="+1-555-555-1212" required autocomplete="tel">

So nennen Sie Ihre <input> Stichworte

Um automatische Vervollständigung auszulösen, stellen Sie sicher, dass Sie das korrekt benennen name und autocomplete Attribute in Ihrem <input> Stichworte. Dies ermöglicht automatisch eine automatische Vervollständigung von Formularen. Stellen Sie sicher, dass Sie auch eine haben <label>! Diese Informationen können auch gefunden werden hier.

Hier erfahren Sie, wie Sie Ihre Eingaben nennen:

  • Name
    • Verwenden Sie eine davon für name: name fname mname lname
    • Verwenden Sie eine davon für autocomplete:
      • name (für den vollständigen Namen)
      • given-name (für Vorname)
      • additional-name (für den zweiten Vornamen)
      • family-name (für Nachnamen)
    • Beispiel: <input type="text" name="fname" autocomplete="given-name">
  • Email
    • Verwenden Sie eine davon für name: email
    • Verwenden Sie eine davon für autocomplete: email
    • Beispiel: <input type="text" name="email" autocomplete="email">
  • Adresse
    • Verwenden Sie eine davon für name: address city region province state zip zip2 postal country
    • Verwenden Sie eine davon für autocomplete:
      • Für eine Adresseingabe:
        • street-address
      • Für zwei Adresseingänge:
        • address-line1
        • address-line2
      • address-level1 (Staat oder Provinz)
      • address-level2 (Stadt)
      • postal-code (Postleitzahl)
      • country
  • Telefon
    • Verwenden Sie eine davon für name: phone mobile country-code area-code exchange suffix ext
    • Verwenden Sie eine davon für autocomplete: tel
  • Kreditkarte
    • Verwenden Sie eine davon für name: ccname cardnumber cvc ccmonth ccyear exp-date card-type
    • Verwenden Sie eine davon für autocomplete:
      • cc-name
      • cc-number
      • cc-csc
      • cc-exp-month
      • cc-exp-year
      • cc-exp
      • cc-type
  • Benutzernamen
    • Verwenden Sie eine davon für name: username
    • Verwenden Sie eine davon für autocomplete: username
  • Passwörter
    • Verwenden Sie eine davon für name: password
    • Verwenden Sie eine davon für autocomplete:
      • current-password (für Anmeldeformulare)
      • new-password (Für Anmelde- und Passwortwechselformulare)

Ressourcen

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