Fix Chrome prefill problem

Design requirements:

The problem

In Chrome, when you log in, it will remind you whether to record the password. After clicking “yes”, when you enter this page next time, the browser will automatically recharge the value in the input box, the background is not yellow, but before the user interacts with the browser (mouse click, etc.), the value can not be obtained by using JS or (pre-fill). In this way, the user can see that the input field has a value, but because js did not get the value, the submit button also shows a gray disabled state

360 browser padding is true padding

The solution

<input name="username" ref="username" />
<input password="password" ref="password" />
<button type="button" :disabled="buttonDisabled"> submit < / button >Copy the code

export default {
    data() {
        return {
            username: ' ',
            password: ' '// Whether the username is automatically filled by the browser usernameBrowserFilled:false// Whether the password is automatically filled by the browser passwordBrowserFilled:false,
        }
    },
    computed: {
        buttonDisabled() {// fill the input box to indicate that there is a value, but do not getreturn (this.username || this.usernameBrowserFilled) && (this.password && this.passwordBrowserFilled)
        }
    },
    mouneted() {
        this.addInputBrowserFillListener()
    },
    methods: {
        addInputBrowserFillListener() {
             detectingBrowserAutofill({
              input: this.$refs.username,
              onAutoFillStart: (input) => {
                this.usernameBrowserFilled = true
              },
              onAutoFillCancel: (input) => {
                this.usernameBrowserFilled = false
              }
            })
            detectingBrowserAutofill({
              input: this.$refs.password,
              onAutoFillStart: (input) => {
                this.passwordBrowserFilled = true
              },
              onAutoFillCancel: (input) => {
                this.passwordBrowserFilled = false
              }
            })
        },
        detectingBrowserAutofill({input, onAutoFillStart, onAutoFillCancel}) {
            const onAnimationStart = ({target, animationName}) => {
                switch (animationName) {
                  case 'onAutoFillStart':
                    return onAutoFillStart(target)
                  case 'onAutoFillCancel':
                      returnOnAutoFillCancel (target)}} // input add listener, animation generation see CSS input.addeventListener ('animationstart', onAnimationStart, false)}}}Copy the code

@keyframes onAutoFillStart {
  from {/**/}
  to {/**/}
}

@keyframes onAutoFillCancel {
  from {/**/}
  to {/**/}
}

input:-webkit-autofill {
  // Expose a hook for JavaScript when auto fill is shown.
  // JavaScript can capture 'animationstart' events
  animation-name: onAutoFillStart;

  // Make the backgound color become yellow _really slowly_
  transition: background-color 1s ease-in-out 0s;
}

input:not(:-webkit-autofill) {
  // Expose a hook for JS onAutoFillCancel
  // JavaScript can capture 'animationstart'events animation-name: onAutoFillCancel; // Transition: background-color 0.2s ease-in-out 0s; }Copy the code

The resources

Related questions

Source of solution

bumfo.github.io/l.html

Segmentfault.com/q/101000000…