欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

去除输入框input的缓存提示、自动填充

程序员文章站 2022-07-13 09:59:27
...

1.input框的缓存提示

去除输入框input的缓存提示、自动填充

清除方法:

  1. 在不想使用缓存的input中添加 autocomplete=“off”;
  2. 在 input 所在的form标签中添加 autocomplete=“off”;

2.input框的自动填充

去除输入框input的缓存提示、自动填充

当“密码”那项input的type改成password的时候
chrome浏览器对type="password"进行了识别,并把"密码"项进行了填充,并且把"密码"项前面input当成了"账号"项进行了填充

  1. 去除自动填充解决办法是,添加两个隐藏的input框,第二个type为password
<label style="display:none;"><span></span><input type="text" name="hidden1" ></label>
<label style="display:none;"><span></span><input type="password" name="hidden2" ></label>
  1. 修改填充背景颜色
input[type="text"] {
    border: 1px solid #333333 !important;
    padding: 0px 12px 0px 32px;
    background: transparent !important;
}
input[type="password"] {
    border: 1px solid #333333 !important;
    padding: 0px 12px 0px 32px;
    background: transparent !important;
}

@-webkit-keyframes autofill {
    to {
        color: #666;
        background: transparent;
    }
}

input:-webkit-autofill {
    animation-name: autofill !important;
    animation-fill-mode: both !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    background-clip: content-box !important;
}