谷歌浏览器表单提交，input填充背景

最新推荐文章于 2021-07-06 08:11:17 发布

ddm9650

最新推荐文章于 2021-07-06 08:11:17 发布

阅读量236

点赞数

原文链接：http://www.cnblogs.com/gzya/p/11175758.html

版权

Chrome会在客户登陆过某网站之后, 会自动记住密码
当你下次再次进入该网站的时候, 可以自由的选择登陆的账号, Chrome会为你自动填充密码. 而你无需再输入密码
这本身是一个很好的功能, 但是对于开发者而言, 却有一个很让人难受的问题.
当你选择账号密码之后, 你的输入框会变成黄色… x黄色 (额. 只是因为我单纯的不喜欢这个颜色. 勿喷, 谢谢).

之所以出现这样的样式, 是因为Chrome会自动为input增加如下样式.

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { background-color: rgb(250, 255, 189); background-image: none; color: rgb(0, 0, 0); }

这个样式的优先级也比较高.
无法通过important覆盖(这就比较恶心了).
解决方法

关闭浏览器自带填充表单功能

如果你的网站安全级别高一些, 可以直接关闭. 也不需要再调样式了.

<form autocomplete="off">

<input type="text" autocomplete="off">

PS: 毕竟是一个很好的功能, 关了多不方便.

通过纯色的阴影覆盖底(huang)色

 input:-webkit-autofill {
 -webkit-box-shadow: 0 0 0px 1000px white inset; -webkit-text-fill-color: #333; }

注: 这种只适用于纯色背景的输入框.

通过设置input样式动画

推荐使用这种的. 因为基本上没有人会等那么久…

input:-webkit-autofill,
    input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-transition-delay: 99999s; -webkit-transition: color 99999s ease-out, background-color 99999s ease-out; }

如果不想被填充 添加autocomplete="new-password"

重点：初始化打开页面，不会填充背景色，但页面切换隐藏元素，比如多种登录方式切换，还是会有背景色填充。

解决方案：切换的时候，先清空，再赋值，避免浏览器有值就填充。

  let userName=$("#userName").val();
                    let password=$("#password").val();
                    $("#userName").val("");
                    $("#password").val("");
                    setTimeout(res=>{
                        $("#userName").val(userName);
                        $("#password").val(password);
                        $("#userTel").val(userTel);
                    })

转载于:https://www.cnblogs.com/gzya/p/11175758.html