关于chrome记住密码的规则

最近在做项目表单部分，发现选择chrome记住密码后，不但点击记住密码的页面表单，整个项目的表单都被影响，后多次反复试用，发现了几条规律，在此记录并给大家看看，如果有问题或者有需要补充的，请留言，我随时改。3q

规则一
记住的密码，不清缓存，就不会消失，即便改变了 主表单–被记住的表单 的属性，此域名下的其他表单依然会显示–多发生在开发阶段，发现修改了属性，记住的密码和用户名依然显示。

规则二
先name，后id，有name就按name显示，否则按照id显示，显示的时候（包括自己以及其他同类型input）也按照这个规则，尤其是其他同name 或同id 甚至既同name又同id的input先取相同name 的记住值，后取相同id 的记住值

如被记住的input为
<input type=”text” name=”user1″ id=”user1″ >
<input type=”text” name=”user2″ id=”user2″ >

现其他页面有input如下：
<input type=”text” name=”user1″ id=”user2″ > //显示的是上面第一个，既name 为 user1， id 为user1 的input记住值
<input type=”text” name=”user2″ id=”user1″ > //显示的是上面第二个，既name 为 user2， id 为user2 的input记住值

规则三
关于type=password 的input，当chrome发现跳转的下一个页面有type=password的时候，是不会弹出 记住密码 弹窗的，所以这里的跳转地址很重要，跳转的下个页面有password 的input的话，chrome不会弹窗，跳转的下个页面没有的话，就会弹出 — 此种情况只有在form表单提交，且action中填写的只是静态html，并没有请求接口的时候会这样。另外password 的输入框内容是共享的，共享管理密码中被记住的当前站点下的密码。不受name与id的影响

规则四
type=password 的 DOM 上面最近的input（type为 text或者email居多，如果上面是隐藏域，即便隐藏域中有默认值，也会依次往上查找）默认被chrome认为是password 的user名被保存下来，在 chrome 设置中的 管理密码 弹窗上可以一目了然的看清楚，记住密码的原理是按照 域名 + user + password 的形式记住的

规则五
即便主表单是被记住的，如果主表单没有name 或id，后期依然不能显示，然而被记住的密码在其他同站点下表单同类型的input会显示
如 主表单 index.html 即便只有user 没有name 和id ，password框有name，也会如此
<input type=”text” placeholder=”user”> //记住后不显示
<input type=”Password” name=”psd” placeholder=”Password”> //记住后不显示

附表单 password.html
<input type=”password” name=”passworpooo” id=”r” class=”form-control” placeholder=”456446″>//记住后显示

规则六
开发过程中会遇到的坑，是记住密码后。再改代码，依然发现记住的密码显示，于是以为修改的代码是有效或无效的，其实记住的是之前的，所以每次修改代码，需要清空所有缓存及记住的密码，比如 主表单 中 user的input 的类型email， name 为 user，输入内容提交表单记住密码后，再删掉name或者修改name，使其不为user，当加载到 email 的input 并且 name=user 的时候，双击，依然显示之前记住的内容

规则七
类型不相同的表单域，只要name 或者id 与之相同，依然会显示
如：主表单 index.html
<input type=”email” name=”user” placeholder=”Email”>
<input type=”text” name=”user1231″ placeholder=”user”>
<input type=”Password” name=”psw1231″ placeholder=”Password”>

附表单 email.html
<input type=”text” name=”user”> //显示
<input type=”email” name=”user” id=”Email2″>//显示
<input type=”email” id=”user”>//显示
当主表单被记住后， email.html 中第一个input双击后，依然显示了主表单记住的内容
因为 email类型的输入框是h5中新加入成员，强烈怀疑，本质其实是text，只不过为了开发方便，区分开来的，在做邮箱类型验证的时候能派上用场，此处待查

规则八
记住密码与其他输入域不同，没有弹窗选择记住密码，输入域依然会记住曾经输入的内容，而记住密码不同，是不会显示的

规则九–摘抄网上一段处理方式

如何禁用Chrome谷歌浏览器自动保存密码的提示？
在网页开发中，在表单中加入autocomplete=”off”后，IE和FF不会提示保存密码，但是用Chrome浏览器登录系统时，会弹出自动保存密码的提示，从安全的角度考虑，需要禁止浏览器的这个功能，提升系统安全性。
大部分浏览器都是根据表单域的type=”password”来判断密码域的，所以针对这种情况可以采取“动态设置密码域”的方法：
复制代码 代码如下:
<input type=”text” name=”password” onfocus=”this.type=’password'” autocomplete=”off”/>
解释：当这个文档框获取焦点时才将其变成密码域。
实测该方法简单有效，可以禁用Chrome浏览器提示保存密码的提示框。
注意，onfocus=”this.type=’password'”不能再IE上识别，需要做兼容性考虑，在网页初始化的时候处理下就好了，对于IE浏览器，在input标签上使用用type=”password” autocomplete=”off”后，浏览器是不会提示记住密码的。

将autocomplete=”off”属性放入表单form中时，firefox 依然显示弹窗询问是否记住密码，然而即便记住了，依然在表单中不显示，否则记住的信息会默认填充在表单中，即便刷新仍然无效
而chrome的处理方式 为只限制其他输入域的内容不显示，记住密码弹窗正常弹出，记住密码的两个关键输入域—被chrome记住的user和password，也依然会默认显示在输入框中

但很显然 <input type=”text” name=”password” onfocus=”this.type=’password'” autocomplete=”off”/>这句话是有效的，因为当前表单中没有type=password 的输入框，chrome是不会弹窗显示提醒记住密码的

疑问：自己新建的demo中，除非使用input type=submit 或 button 或使用 $(“form”).submit() 总之，一定要表单提交，才会弹出弹窗提示记住密码，使用
<a href="javascript:;" class="button">submit</a> 伪提交，完成ajax传输数据后跳转页面，是不会弹窗提示记住密码的，然而公司的项目也是使用了a标签，好奇怪，后天回公司看下

答案：不管是form表单提交还是ajax（不管是否登录成功），都会弹出 记住密码

文章TAG：关于  chrome  记住  密码  关于chrome记住密码的规则