Perfect solution to Google Chrome autofill problem

In Google Chrome, after successful login, Google Chrome will prompt whether to remember the password. If you choose to remember the password, the following will appear when you log in again:

If the product requirement is that you do not want the browser to automatically fill in the account and password, how can you remove it?

The first thing that comes to mind is to set the input tag attribute autocomplete="off", which does not work.

Then I tried setting css input:-webkit-autofill, setting the background color to transparent and setting the corresponding font color, but it was still unsatisfactory.

Then, according to a method provided on the Internet, add an additional fake input element, which is initially visible. After the document is loaded, use setTimeout to hide the fake input.

The time set by setTimeout is 1ms. I don't know if the way I implemented it is wrong or what, it still doesn't work 3.

Then a thought suddenly popped up in my mind: if the input box does not exist when the document is initialized, and then is injected into the document node after the document is loaded successfully, will the browser not automatically fill it in?

As expected, the input box will no longer be filled, and it's done, hahahaha

Since the project is based on Vue, the late insertion of elements is relatively simple to implement. The code is as follows:

<template>
  <div>
    <input v-if="isShow" type="text">
  </div>
</template>
<script>
  export default {
    data(){
      return {
        isShow:false
      }
    },
    mounted(){
      setTimeout(()=>{
        this.isShow = true;
      },1)
    }
  }
</script>

This is the end of this article on how to perfectly solve the Google Chrome auto-fill problem. For more relevant Google Chrome auto-fill content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!