谷歌浏览器禁止默认填充及填充色修改

正常情况下：

去掉填充色

input:focus:-webkit-autofill,
input:-webkit-autofill {
    box-shadow: 0 0 0px 1000px #F8F9FB inset!important;
    -webkit-text-fill-color: #232D39!important;
    font-size: 16px;
    -webkit-box-shadow: 0 0 0px 1000px #F8F9FB inset!important;
    transition: background-color 1000s ease-in-out 1000s!important;			
}

1. 不进行默认填充，input聚焦时也不提示账号密码

方法有两个

1. 给input 设置 autocomplete=“new-password”
2. 在填充的input前面加两个隐藏的input，让浏览器去填充隐藏的input

注意：需 width:0;height:0，而不能直接 display:none

<input type="text" style="width:0;height:0;border:none;"/>
<input type="password" style="width:0;height:0;border:none;"/>

2. 不进行默认填充，input聚焦时仍可以提示账号密码

方法：先给 input 设置 readonly 只读，然后在页面渲染完成后，用 js 把 readonly 去掉

HTML

我这里用的 iview 的 input 组件，原生的 input 把 element-id 改成 id 就可以了

<Input element-id="username" prefix="ios-call" readonly type="tel" v-model="userPhone" placeholder="请输入手机号"></Input>

<Input element-id="password" prefix="ios-unlock" readonly type="password" password v-model="password" placeholder="请输入密码"></Input>

JS

setTimeout(function removeReadonly(){
     var username = document.getElementById("username");
     var password = document.getElementById("password");
     username.removeAttribute("readonly");
     password.removeAttribute("readonly");
 },1000);