Perfect solution to Google browser auto fill problem

Time:2020-12-5

In Google browser, after successful login, Google browser will prompt whether to remember the password. If you choose to remember the password, then login again will appear such as the following:

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

The first thing I thought about was that setting the input tag property autocomplete = off doesn’t work,

Then try to set up CSS input:-webkit-autofill Setting the background color to transparent and setting the corresponding font color is still unsatisfactory.

Then, according to a method provided on the Internet, an additional fake input element is added, which is initially visible. After the document is loaded, the forged input is hidden through setTimeout,

The time set by setTimeout is 1ms. I don’t know whether it’s the wrong way to realize it or how, it still doesn’t work.

Later, an idea suddenly came out. If the input box does not exist in the document initialization and then is injected into the document node after the document is loaded successfully, will the browser not automatically fill in?

As expected, as expected, as expected, the input box will not be filled again, and it is finished, ha ha ha

Since the project is based on Vue, the later insertion of elements is relatively simple. 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 article on the perfect solution to the problem of Google browser auto fill is introduced here. For more relevant Google browser auto fill content, please search the previous articles of developeppaer or continue to browse the related articles below. I hope you can support developeppaer more in the future!