浏览器记住用户名和密码并且自动填充怎么破?百度找的方法好像都不够优雅,优雅永不过时,今天我就带你优雅的解决这个问题。
1. 现象
在浏览器中输入用户名和密码,浏览器会记住,下次再输入的时候,浏览器会自动填充,这个自动填充搞一个黄不拉几的背景色(chrome黄不拉几,Edge不是),而且还给自己精心写的输入框的样式覆盖了,真是头大。
让用户清除缓存?让用户手动删除记住的密码?这你还能控制用户?
前面的两个方案可以不用看,只当是拓展阅读,可以直接看最后的解决方案。
2. 解决方案1
万能的百度,找到了一个方法,就是在输入框的属性上加上autocomplete="off"
。
<input type="text" name="username" autocomplete="off"/>
这个方法很棒,来看看这个属性的说明:
- autocomplete* 该属性规定是否启用浏览器的自动完成功能。如果启用,浏览器会自动完成输入字段的值。* 该属性仅适用于 type=“text”、type=“search”、type=“url”、type=“tel”、type=“email” 和 type=“password”。* 该属性值可选值:* on:启用自动完成功能。* off:禁用自动完成功能。* new-password:启用自动完成功能,但是仅在用户输入新密码时使用。* current-password:启用自动完成功能,但是仅在用户输入当前密码时使用。* username:启用自动完成功能,但是仅在用户输入用户名时使用。* email:启用自动完成功能,但是仅在用户输入电子邮件地址时使用。* tel:启用自动完成功能,但是仅在用户输入电话号码时使用。* …还有很多,不一一列举了,可以去