it-swarm.com.de

Wie löse ich Autofill in Google Chrome aus?

Ich würde gerne wissen, ob es eine spezielle Markierung gibt, um die Chrome-Funktion zum automatischen Ausfüllen für ein bestimmtes Formular zu aktivieren. Ich habe nur Fragen zum Deaktivieren gefunden, aber ich würde gerne wissen, ob ich dem HTML-Code eine Art Markierung hinzufügen kann, um dem Browser mitzuteilen, "Dies ist die Eingabe für die Adresse" oder "Dies ist die Postleitzahl Feld ", um es korrekt auszufüllen (vorausgesetzt der Benutzer hat diese Funktion aktiviert).

166
Riesling

UPDATE für 2017: Die Antwort von Katie scheint aktueller zu sein als meine. Zukünftige Leser: geben Sie Ihre Zustimmung zu ihre Antwort .

Dies ist eine großartige Frage, für die es überraschend schwierig ist, Unterlagen zu erhalten. Tatsächlich werden Sie in vielen Fällen feststellen, dass die Chrome AutoFill-Funktion "nur funktioniert". Das folgende HTML-Snippet erzeugt beispielsweise ein Formular, das zumindest für mich (Chrome v. 18) automatisch ausgefüllt wird, nachdem Sie in das erste Feld geklickt haben:

_<!DOCTYPE html>
<html>
<body>    
<form method="post">
  First name:<input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  E-mail: <input type="text" name="email" /><br />
  Phone: <input type="text" name="phone" /><br />
  Address: <input type="text" name="address" /><br />
</form>
</body>
</html>
_

Diese Antwort ist jedoch unbefriedigend, da die Lösung im Bereich der "Magie" verbleibt. Wenn ich genauer hinschaue, habe ich erfahren, dass Chrome (und andere Browser mit automatischer Ausfüllung) in erster Linie auf kontextbezogene Hinweise angewiesen sind, um den Datentyp zu bestimmen, der in Formularelemente gefüllt werden soll. Beispiele für solche kontextbezogenen Hinweise sind name eines Eingabeelements, der das Element umgebende Text und ein beliebiger Platzhaltertext.

Vor kurzem hat das Chrome -Team jedoch eingeräumt, dass dies eine unbefriedigende Lösung ist, und sie haben begonnen, auf eine Standardisierung in dieser Angelegenheit zu drängen. Ein sehr informativer Beitrag von der Google Webmasters-Gruppe diskutierte kürzlich dieses Problem und erklärte:

Leider war es für Webmaster bisher schwierig, sicherzustellen, dass Chrome und andere Anbieter, die Formulare ausfüllen, ihre Formulare korrekt analysieren können. Einige Standards existieren; Sie haben jedoch die Implementierung der Website stark belastet, sodass sie in der Praxis kaum zum Einsatz kommen.

(Die "Standards", auf die sie sich beziehen, sind eine neuere Version der Spezifikation in der obigen Antwort von Avalanchis erwähnt.)

In der Google-Veröffentlichung wird die vorgeschlagene Lösung beschrieben (was in den Kommentaren der Veröffentlichung auf erhebliche Kritik stößt). Sie schlagen die Verwendung eines neuen Attributs für diesen Zweck vor:

Fügen Sie dem Eingabeelement einfach ein Attribut hinzu, zum Beispiel könnte ein E-Mail-Adressfeld so aussehen:

_<input type=”text” name=”field1” x-autocompletetype=”email” />_

... wobei _x-_ für "experimentell" steht und entfernt wird, wenn & dies zum Standard wird. Lesen Sie den Beitrag für weitere Details, oder wenn Sie tiefer gehen möchten, finden Sie eine ausführlichere Erklärung des Vorschlags im whatwg-Wiki .


UPDATE: Wie in diesen aufschlussreichenAntworten , alle regulären Ausdrücke Chrome zum Identifizieren/Erkennen gemeinsamer Felder finden Sie in autofill_regex_constants.cc.utf8 . Um die ursprüngliche Frage zu beantworten, stellen Sie einfach sicher, dass die Namen Ihrer HTML-Felder mit diesen Ausdrücken übereinstimmen. Einige Beispiele sind:

  • Vorname: _"first.*name|initials|fname|first$"_
  • Nachname: _"last.*name|lname|surname|last$|secondname|family.*name"_
  • E-Mail: _"e.?mail"_
  • Adresse (Zeile 1): _"address.*line|address1|addr1|street"_
  • Postleitzahl : _"Zip|postal|post.*code|pcode|^1z$"_
175
kmote

Diese Frage ist ziemlich alt, aber ich habe ein aktualisierte Antwort für 2017!

Hier ist ein Link zur WHATWG-Dokumentation zum Aktivieren der automatischen Vervollständigung.

Google hat eine ziemlich nette Anleitung für die Entwicklung von Webanwendungen geschrieben, die für mobile Geräte geeignet sind. In diesem Abschnitt wird beschrieben, wie Sie die Eingaben in Formularen benennen, um das automatische Ausfüllen zu verwenden. Obwohl es für Mobilgeräte geschrieben wurde, gilt dies sowohl für Desktop- als auch für Mobilgeräte! 

So aktivieren Sie AutoComplete in Ihren HTML-Formularen

Hier sind einige wichtige Punkte zum Aktivieren der automatischen Vervollständigung:

  • Verwenden Sie einen <label> für alle Ihre <input>-Felder
  • Fügen Sie ein autocomplete-Attribut hinzu zu Ihren <input>-Tags und füllen Sie es mit diesem guide aus.
  • Benennen Sie Ihre name- und autocomplete-Attribute korrekt für alle <input>-Tags
  • Example:

    <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="[email protected]" required autocomplete="email">
    
    <!-- note that "emailC" will not be autocompleted -->
    <label for="frmEmailC">Confirm Email</label>
    <input type="email" name="emailC" id="frmEmailC"
    placeholder="[email protected]" required autocomplete="email">
    
    <label for="frmPhoneNumA">Phone</label>
    <input type="tel" name="phone" id="frmPhoneNumA"
    placeholder="+1-555-555-1212" required autocomplete="tel">
    

So benennen Sie Ihre <input>-Tags

Um die automatische Vervollständigung auszulösen, müssen Sie die Attribute name und autocomplete in Ihren <input>-Tags korrekt benennen. Dies ermöglicht automatisch die automatische Vervollständigung von Formularen. Stellen Sie sicher, dass Sie auch einen <label> haben! Diese Informationen finden Sie auch hier

So benennen Sie Ihre Eingaben:

  • Name
    • Verwenden Sie eine dieser Optionen für name: name fname mname lname
    • Verwenden Sie eine dieser Optionen für autocomplete:
      • name (für vollständigen Namen)
      • given-name (für Vornamen)
      • additional-name (für den zweiten Vornamen)
      • family-name (für Nachname)
    • Beispiel: <input type="text" name="fname" autocomplete="given-name">
  • E-Mail
    • Verwenden Sie eine dieser Optionen für name: email
    • Verwenden Sie eine dieser Optionen für autocomplete: email
    • Beispiel: <input type="text" name="email" autocomplete="email">
  • Adresse
    • Verwenden Sie eine dieser Optionen für name: address city region province state Zip zip2 postal country 
    • Verwenden Sie eine dieser Optionen für autocomplete:
      • Für eine Adresseingabe:
        • street-address
      • Für zwei Adresseneingaben:
        • address-line1
        • address-line2
      • address-level1 (Bundesland oder Provinz)
      • address-level2 (stadt)
      • postal-code (Postleitzahl)
      • country
  • Telefon
    • Verwenden Sie eine dieser Optionen für name: phone mobile country-code area-code exchange suffix ext
    • Verwenden Sie eine dieser Optionen für autocomplete: tel
  • Kreditkarte
    • Verwenden Sie eine dieser Optionen für name: ccname cardnumber cvc ccmonth ccyear exp-date card-type
    • Verwenden Sie eine dieser Optionen für autocomplete:
      • cc-name
      • cc-number
      • cc-csc
      • cc-exp-month
      • cc-exp-year
      • cc-exp
      • cc-type
  • Benutzernamen
    • Verwenden Sie eine dieser Optionen für name: username
    • Verwenden Sie eine dieser Optionen für autocomplete: username
  • Kennwörter
    • Verwenden Sie eine dieser Optionen für name: password
    • Verwenden Sie eine dieser Optionen für autocomplete:
      • current-password (für Anmeldeformulare)
      • new-password (für Anmelde- und Passwortänderungsformulare)

Ressourcen

53
Katie S

Das x-autocomplete-Tag bewirkt bei meinen Tests nichts. Verwenden Sie stattdessen autocomplete-Tags für Ihre Eingabe-Tags und legen Sie ihre Werte gemäß der HTML-Spezifikation hier http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and fest -forms.html # autofill-Feld

Beispiel:

<input name="fname" autocomplete="given-name" type="text" placeholder="First Name" required>

Das übergeordnete Formular-Tag benötigt autocomplete = "on" und method = "POST".

37
Micah

Sie müssen die Elemente entsprechend benennen, damit der Browser sie automatisch ausfüllt.

Hier ist die IETF-Spezifikation dafür:

http://www.ietf.org/rfc/rfc3106.txt1

5
Avalanchis

Es sieht so aus, als würden wir mehr Kontrolle über diese AutoFill-Funktion erhalten. Es gibt eine neue experimentelle API für Chrome Canary, mit der auf die Daten zugegriffen werden kann, nachdem der Benutzer danach gefragt wurde:

http://www.chromium.org/developers/using-requestautocompletehttp://blog.alexmaccaw.com/requestautocomplete

neue Infos bei Google:

http://googlewebmastercentral.blogspot.de/2015/03/helping-users-fill-out-online-forms.html

https://developers.google.com/web/fundamentals/input/form/label-and-name-inputs#use-metadata-to-enable-auto-complete

2
Riesling

Ich habe nur mit der Spezifikation herumgespielt und ein schönes Arbeitsbeispiel erhalten - einschließlich einiger weiterer Felder.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

  <form autocomplete="on" method="POST">

    <fieldset>
        <legend>Ship the blue gift to...</legend>
        <p>
            <label> Firstname:
<input name="fname" autocomplete="section-blue shipping given-name" type="text"  required>
            </label>
      </p>
        <p>
            <label> Lastname:
<input name="fname" autocomplete="section-blue shipping family-name" type="text" required>
            </label>
      </p>

        <p>
            <label> Address: <input name=ba
                autocomplete="section-blue shipping street-address">
            </label>


      </p>
        <p>
            <label> City: <input name=bc
                autocomplete="section-blue shipping address-level2">
            </label>

      </p>
        <p>
            <label> Postal Code: <input name=bp
                autocomplete="section-blue shipping postal-code">
            </label>
      </p>

    </fieldset>
    <fieldset>
        <legend>Ship the red gift to...</legend>
        <p>
            <label> Firstname:
<input name="fname" autocomplete="section-red shipping given-name" type="text" required>
            </label>
      </p>

        <p>
            <label> Lastname:
<input name="fname" autocomplete="section-red shipping family-name" type="text" required>
            </label>
      </p>
        <p>
            <label> Address: <input name=ra
                autocomplete="section-red shipping street-address">
            </label>
      </p>


        <p>
            <label> City: <input name=bc
                autocomplete="section-red shipping address-level2">
            </label>

      </p>

        <p>
            <label> Postal Code: <input name=rp
                autocomplete="section-red shipping postal-code">
            </label>
      </p>

    </fieldset>

        <fieldset>
        <legend>payment address</legend>
        <p>
            <label> Firstname:
<input name="fname" autocomplete="billing given-name" type="text" required>
            </label>
      </p>

        <p>
            <label> Lastname:
<input name="fname" autocomplete="billing family-name" type="text" required>
            </label>
      </p>
        <p>
            <label> Address: <input name=ra
                autocomplete="billing street-address">
            </label>
      </p>


        <p>
            <label> City: <input name=bc
                autocomplete="billing address-level2">
            </label>

      </p>

        <p>
            <label> Postal Code: <input name=rp
                autocomplete="billing postal-code">
            </label>
      </p>

    </fieldset>
    <input type="submit" />
</form>

</body>
</html>

JSBIN

Es enthält 2 separate Adressbereiche und auch unterschiedliche Adressentypen . Es wurde auch unter iOS 8.1.0 getestet und es scheint, dass es immer alle Felder auf einmal ausfüllt, während der Desktop-Chrome die Adresse nach Adresse automatisch ausfüllt.

0
staabm

Hier ist die neue Liste der "Autofill" -Namen von Google. Es gibt alle unterstützten Namen in jeder zulässigen Sprache.

autofill_regex_constants.cc

0
Alvargon

Hier ist die wirkliche Antwort:

Der einzige Unterschied besteht im Etikett selbst. Das "Nom" stammt aus "Name" oder "Nome" in Portugiesisch.

Hier ist was Sie brauchen:

  • Eine Formularverpackung;
  • Ein <label for="id_of_field">Name</label>
  • Ein <input id="id_of_field"></input>

Nichts mehr.

0
Totty.js

In meinem Fall ist $('#EmailAddress').attr('autocomplete', 'off'); nicht bearbeitet ..__, aber das folgende funktioniert auf Chromversion 67 von jQuery.

$('#EmailAddress').attr('autocomplete', 'new-email');
$('#Password').attr('autocomplete', 'new-password');
0
reza.cse08
0
henry