Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

google chrome - paper-input autocomplete fails to fill

Polymer 1.0 Chrome 50.0.2661.102

I am trying to enable chrome autofill with paper input. When selecting either input the standard appropriate chrome autofill prompt list appears, however selecting an available name, or email from the list does not populate the input, it just closes the chrome autofill list.

   <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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

To make it work, you need to switch to shady DOM as currently (8-2-2018), browsers do not support Autofill for shadowDOM. Polymer developers have request for this support in following bug trackers:

  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

To make it work with shady DOM, Place the following code above webcomponents-loader.js script:

    <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>

And use the function idToChainedClass in ready() wherever you see error of like this: [DOM] Found x elements with non-unique id #input You can also randomize the ID to make it unique. Follow the technique provided by paper-input: https://github.com/PolymerElements/paper-input/pull/609/files


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...