Papier-Eingang zur automatischen Vervollständigung fehlschlägt

Question

Polymer 1,0 Chrome 50.0.2661.102

Ich versuche, Chrom autofill mit Papierzufuhr füllen zu können. Wenn Sie eine der beiden Eingaben auswählen, wird die standardmäßige entsprechende AutoFill-Eingabeaufforderung angezeigt. Wenn Sie jedoch einen verfügbaren Namen oder eine E-Mail aus der Liste auswählen, wird die Eingabe nicht ausgefüllt, sondern nur die automatische Füllliste geschlossen.

<paper-input 
    id="email" 
    name="email" 
    label="Email" 
    type="email" 
    autocomplete="email" 
    ></paper-input> 
    <paper-input 
    id="password" 
    name="password" 
    label="Password" 
    type="password" 
    autocomplete="current-password" 
    ></paper-input> 

Answer 1

Versuchen Sie, Ihre Eingaben in Form-Tags ohne Attribute zu verpacken. Wie folgt aus:

<form> 
    <paper-input 
    id="email" 
    name="email" 
    label="Email" 
    type="email" 
    autocomplete="email" 
    ></paper-input> 
    <paper-input 
    id="password" 
    name="password" 
    label="Password" 
    type="password" 
    autocomplete="current-password" 
    ></paper-input> 
</form> 

Answer 2

, damit es funktioniert, müssen Sie schattigen DOM wechseln, wie sie derzeit (2018.08.02), Browser unterstützen Autofill nicht für shadowDOM. Polymer-Entwickler haben Anfrage für diese Unterstützung in folgenden Bug-Tracker:

1. https://bugs.webkit.org/show_bug.cgi?id=172567
2. https://bugs.chromium.org/p/chromium/issues/detail?id=746593
3. https://github.com/PolymerElements/paper-input/issues/554
4. https://github.com/PolymerElements/iron-form/issues/197
5. https://vlukashov.github.io/polymer-forms/#custom-in-shadow

Um es mit schattigen DOM, Platz zu machen arbeiten der folgende Code über webcomponents-loader.js Skript:

<script> 
     // Force all polyfills on 
     if (window.customElements) window.customElements.forcePolyfill = true; 
     ShadyDOM = { 
      force: true 
     }; 

     function idToChainedClass(poly, _this) { 
      if (ShadyDOM) { 
       const allElements = poly.dom(_this.root).querySelectorAll('*'); 
       let id; 
       for (var x = 0, len = allElements.length; x < len; x++) { 
        if (allElements[x].id) { 
         id = allElements[x].id; 
         allElements[x].removeAttribute('id'); 
         allElements[x].classList.add(id); 
         _this.$[id] = poly.dom(_this.root).querySelector('.' + id); 
        } 
       } 
      } 
     } 
    </script> 
    <script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script> 

Und verwenden Sie die Funktion idToChainedClass in ready() wo immer Sie Fehler sehen wie folgt aus: [DOM] Gefunden x Elemente mit nicht eindeutigen ID #input Sie können auch die ID randomisieren, um es einzigartig zu machen . Befolgen Sie die Technik von Papier-Eingabe: https://github.com/PolymerElements/paper-input/pull/609/files