禁用Safari自动填充用户名和密码
您可能已经知道，无论您是否设置了autocomplete="off" ，Safari都有一个令人讨厌的自动填充错误，它填充了电子邮件，用户名和密码字段。
这是一个基本的forms：
<form action="/" method="post"> <p> <label>E-mail</label> <input type="text" name="email" value="" /> </p> <p> <label>Password</label> <input type="password" name="password" value="" /> </p> </form>
… Safari自动填充页面加载这些领域应该像，应做得很好！
如果您将autocomplete="off"到字段和/或表单元素，则Safari仍会自动填充这些字段：
<form action="/" method="post" autocomplete="off"> <p> <label>E-mail</label> <input type="text" name="email" value="" autocomplete="off" /> </p> <p> <label>Password</label> <input type="password" name="password" value="" autocomplete="off" /> </p> </form>
即使这不起作用：
<form action="/" method="post" autocomplete="off"> <p> <label>E-mail</label> <input type="text" name="secretfield1" value="" autocomplete="off"/> </p> <p> <label>Password</label> <input type="password" name="secretfield2" value="" autocomplete="off" /> </p> </form>
…因为Safari会查找这些<label>元素，如果它们包含“电子邮件”，“密码”等字样并继续进行自动填充。
Aaaahhhhha !,我想，试了这个：
<form action="/" method="post" autocomplete="off"> <p> <label>%REPLACE_EMAIL_TITLE%</label> <input type="text" name="%REPLACE_EMAIL_NAME%" value="" autocomplete="off"/> </p> <p> <label>%REPLACE_PASSWORD_TITLE%</label> <input type="password" name="%REPLACE_PASSWORD_NAME%" value="" autocomplete="off" /> </p> </form>
…并使用JavaScriptreplace％TAGS％与真实姓名。 Safari自动填充function会启动。无论您是否更换了10秒的超时设置，
那么，这真的是唯一的select吗？
<form action="/" method="post" autocomplete="off"> <p> <label>That electronic postal address we all use, but can't write the title here because Safari fills this with YOUR information if you have autofill turned on</label> <input type="text" name="someelectronicpostaladdress" value="" autocomplete="off"/> </p> <p> <label>A set of characters, letters, numbers and special characters that is so secret that only you or the user you are changing it for knows, but can't write the title here because Safari sucks</label> <input type="password" name="setofseeecretcharacters" value="" autocomplete="off" /> </p> </form>
我希望不是？
更新： @skithund在Twitter中指出 ， Safari正在获得4.0.3更新 ，其中提到“login自动填充”。 有谁知道这个更新是否会解决这个问题？
我有同样的问题。 尽pipe我的解决scheme并不完美，但它似乎工作。 基本上，Safari似乎寻找一个input字段与密码和用户名，并总是试图填补。 所以，我的解决scheme是在Safari可以填写的当前一个之前添加一个假的用户名和密码字段。 我尝试使用style="display: none;" 但是这并没有奏效。 所以，最终，我只是用style="position:absolute; top:-50px;" 这隐藏了input区域，看起来工作正常。 我不想使用JavaScript，但我想你可以用JavaScript隐藏它。
现在，Safari从未自动完成我的用户名和密码字段。
浏览器忽略autocomplete=off的原因是因为有一些网站试图禁用自动完成密码。
那是错的。
而在2014年7月，Firefox成为最后一个主要的浏览器，终于实现了这个改变，忽略了任何试图closures自动完成密码的网站。
- 2009年6月：IEInternals博客讨论保持用户控制权 （ 归档 ）
- 2014年2月：当Chrome浏览器开始忽略
autocomplete=off（ 存档 ） - 2014年1月：Bugzilla错误956906 – 提供通过密码pipe理器保存密码时，忽略autocomplete =“off” （ 归档 ）
- Reddit讨论 （ 存档 ）
关于我们的HTML表单自动完成function的最常见的用户投诉之一是“它不工作 – 我没有看到我以前input的任何文本”。在debugging这种情况下，我们通常会发现该网站已明确禁用该function使用提供的属性，但当然，用户不知道该网站已经这样做，只是简单地假定IE是越野车。 根据我的经验，当function被隐藏或replace时，用户通常会责怪浏览器，而不是网站。
任何网站的任何企图绕过浏览器的偏好是错误的，这就是为什么浏览器忽略它。 没有理由知道为什么一个网站应该尝试禁用密码保存。
- Chrome会忽略它
- Safari忽略它
- IE忽略它
- Firefox忽略它
在这一点上，networking开发人员通常会抗议： “但是我不会在任何地方做到这一点 – 只有在一点点才有意义！”即使这是真的，不幸的是，这是又一个浏览器没有办法的情况来区分 请记住，popup式窗口曾经是网页浏览体验中一个快乐而有用的部分，直到广告客户的滥用使他们成为各地用户的祸根。 不可避免的是，所有的浏览器都开始阻止popup窗口，甚至打破了使用popup窗口的“好”网站。
如果我是一个特殊的雪花呢？
有人提出了一个很好的用例：
我有一个共享的公共区域，电脑亭风格。 我们不希望有人（意外或故意）保存密码，以便下一个用户使用它。
这不违反声明：
任何网站的任何企图绕过浏览器的偏好是错误的
这是因为在共享亭的情况下：
- 它不是具有古怪策略的networking服务器
- 有一个古怪的政策是客户端用户代理
浏览器 （共享计算机）是不要求保存密码的要求。
防止浏览器保存密码的正确方法
是configuration浏览器不保存密码。
由于您已经locking并控制此自助服务terminal电脑：您可以控制设置。 这包括保存密码的选项。
在Chrome和Internet Explorer中，使用组策略（例如registry项）configuration这些选项。
从Chrome政策清单 ：
AutoFillEnabled
启用自动填充
数据types：布尔（REG_DWORD）
Windowsregistry位置： Software \ Policies \ Chromium \ AutoFillEnabled
说明：启用Chromium的自动填充function，并允许用户使用以前存储的信息（如地址或信用卡信息）自动填写Web表单。 如果您禁用此设置，则自动填充将无法被用户访问。 如果启用此设置或不设置值，自动填充将保持在用户的控制之下。 这将允许他们configuration自动填写configuration文件，并自行决定是否打开或closures自动填充function。
请把这个词传给企业pipe理者，试图禁用密码自动完成是错误的。 浏览器故意忽略任何尝试去做的人是错误的。 那些人应该停止做错事
修复：浏览器以只读模式自动填写，并设置焦点可写
<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>
（重点=在鼠标点击和通过字段标签）
更新：移动Safari在字段中设置光标，但不显示虚拟键盘。 新的修复工作像以前一样，但处理虚拟键盘：
<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) { this.removeAttribute('readonly'); // fix for mobile safari to show virtual keyboard this.blur(); this.focus(); }" />
现场演示https://jsfiddle.net/danielsuess/n0scguv6/
// UpdateEnd
说明：浏览器自动将凭据填充到错误的文本字段？
好的，你只注意到：
Safari的自动填充function。无论[字段名称] @Jari
有一个假设：
Safari浏览器似乎寻找一个input字段与密码和用户名，并始终尝试填写 @ user3172174
有时我会注意到Chrome和Safari上的这种奇怪的行为，当有相同forms的密码字段。 我想，浏览器查找密码字段来插入您保存的凭据。 然后它自动填充用户名到最近的文本typesinput字段，出现在DOM中的密码字段之前 （只是由于观察猜测）。 由于浏览器是最后一个实例，您无法控制它，
有时甚至是自动完成=closures不会阻止将凭据填充到错误的字段中，而不是用户或昵称字段。
这只读修复上面为我工作。
扫描完苹果的Safari HTML页面后 ，发现自动完成的任何内容 ，我做了一些search和思考。
在阅读了一个关于苹果讨论的（温和的）相关问题之后 ，我记得默认是不允许记住密码等（可以在iDevice系统设置中启用，或者在提示符下启用）。 由于苹果公司已经把这个function从浏览器移到他们（专有的，我）操作系统（ 本文的屏幕截图 ），我相信他们完全忽略了HTML表单/字段属性。
除非他们改变了对这个特征的看法，因为我确定这是他们预期的行为，在他们locking的设备上，我会假设这不会消失。 原生iOS应用程序可能有所不同。 绝对保持表单自动完成=“closures”， 希望他们有一天会回到function的HTML5标准 。
我知道这不包括任何工作，但我认为，如果你认为它是在iDevices上的非浏览器“function”，这是有道理的（以苹果类的方式）。
这个问题已经得到了成功的回答，但是到今天为止，这个解决scheme对我而言并没有起什么作用，没有做出一些奇怪的改变 – 所以如果我决定回到这个问题的话，至于其他人的。
- 假input需要在dom中真实的电子邮件input之后 。
- 假input需要一个假标签。
- 假标签不能绝对定位。
- 不能使用显示，可见性或不透明来隐藏假元素。
我发现的唯一解决scheme是用overflow: hidden假元素的可见性overflow: hidden 。
<label for="user_email">Email</label> <input autocomplete="off" type="text" value="user@email.com" name="user[email]" id="user_email"> <!-- Safari looks for email inputs and overwrites the existing value with the user's personal email. This hack catches the autofill in a hidden input. --> <label for="fake_email" aria-hidden="true" style="height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px)">Email</label> <input type="text" name="fake[email]" id="fake_email" style="height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px)" tab-index="-1" aria-hidden="true">
为了logging，这个黑客有用的特定情况是，其中一个pipe理员正在编辑其他用户的configuration文件，而Safari则用pipe理员的电子邮件replace用户的电子邮件。 我们已经决定，对于这个Safari“function”创build的小规模（但令人沮丧的）支持请求，不值得维护一个似乎需要随着Safari的收紧而进化的黑客，而是为这些用户提供支持关于如何closures自动填充。
::-webkit-contacts-auto-fill-button, ::-webkit-credentials-auto-fill-button { visibility: hidden; pointer-events: none; position: absolute; right: 0; }
删除<form>元素。 为了保持表单行为，您可以监听input字段的keypress事件来处理按下的enter键。 以防万一我也删除了input type="submit" 。 您可以使用button type="button" 。
我不敢相信，在报道之后这个问题仍然存在。 上面的解决scheme对我来说并不适用，因为Safari浏览器似乎知道元素何时不显示或不在屏幕上，但是下面这些对我来说是有效的：
<div style="position:absolute;height:0px; overflow:hidden; "> Username <input type="text" name="fake_safari_username" > Password <input type="password" name="fake_safari_password"> </div>
希望对某个人有用！
你可以尝试这个变种。 这个对我有用。 如果您更改一次字段值，Safari会再次更改。 如果用户点击此字段，则此值不会被Safari自动更改。
$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase()); if($.browser.chrome){ $.browser.safari = false; } var isChanged=false; $('#Email').change(function () { if ($.browser.safari && !isChanged) { $('#Email').val('@Model.Email'); } }); $('#Email').click(function () { if ( $.browser.safari && !isChanged) { isChanged = true; } }); var isChangePassword = false; $('#OldPassword').change(function () { if ($.browser.safari && !isChangePassword) { $('#OldPassword').val(''); } }); $('#OldPassword').click(function () { if ($.browser.safari && !isChangePassword) { isChangePassword= true; } });
浏览器程序员认为他们比网站作者更了解。 尽pipe允许用户保存密码有时很方便，但还有一些时候存在安全风险。 对于那些时候，这种解决方法可能有所帮助：
首先使用传统的文本input，而不是“密码”types。
Password:   <input type="text" id="fkpass" name="bxpass" class="tinp" size="20" />
然后 – 如果您愿意 – 将焦点设置到input字段。
<BODY onLoad="fitform()">
把JS放在页面的末尾。
<script type="text/javascript"> document.entry.fkpass.focus(); function fitform() { document.getElementById('fkpass').autocomplete = 'off'; } </script>
现在你有一个传统的表单字段。 那有什么好处？
更改该input的CSS样式，以便使用所有“项目符号”而不是字符的字体。
<style type="text/css"> @font-face { font-family: fdot; src: url('images/dot5.ttf'); } @font-face { font-family: idot; src: url('images/dot5.eot'); } @font-face { font-family: wdot; src: url('images/dot5.woff'); } @font-face { font-family: w2dot; src: url('images/dot5.woff2'); } .tinp { font-family: fdot, idot, wdot, w2dot; color: #000; font-size:18px; } </style>
是的，你可以“清理”代码，并添加.svg。
无论哪种方式，最终的结果是无法区分的“真正的”密码input，浏览器将不会提供保存。
如果你想要的字体，它在这里 。 它是使用CorelDraw创build的，并通过在线webfont转换实用程序进行转换。 （dot_webfont_kit.zip 19.3k）
我希望这有帮助。
比使用JS清除内容更好 – 简单的假密码字段：
<input type="text" name="user" /> <input fake_pass type="password" style="display:none"/> <input type="password" name="pass" />
一个passwordtypes使浏览器处于不确定状态，所以它只能自动填充用户名
fake_pass input不应该有name属性保持$_POST干净！
我的问题：我有一个pipe理区的部分，允许用户设置所有的语言值，其中一些包含“密码”，“电子邮件”，“电子邮件地址”等字样，我不希望这些值被填充与用户的细节，他们是创造翻译成另一种语言。 这对于“规避浏览器的偏好”是一个有效的例外。
我的解决scheme：我只是创build了替代名称：
$name = str_replace('email','em___l',$name); $name = str_replace('password','pa___d',$name);
<input type="text" name="<?=$name?>" id="<?=$name?>" />
然后当表格发布时：
foreach($_POST as $name=>$value) { $name=str_replace('em___l','email',$name); $name=str_replace('pa___d','password',$name); $_POST[$name]=$value; }
这是为我工作的唯一方法。
CSS display: none这里提到的display: none解决scheme不适合我（2016年10月）。 我用JavaScript解决了这个问题。
我不介意浏览器记住密码，但要防止自动填充不良。 在我的情况下，一个密码字段和没有关联的用户名字段的表单。 （用户在Drupal 7站点编辑表单，其中只有一些操作需要密码字段。）无论我尝试什么，Safari都会为自动填充密码的用户名（例如，可视化之前的字段）find受害者字段。
只要Safari执行自动填充，我就恢复原始值。 我只在页面加载后的第一个2秒内尝试。 可能更低的值是可以的。 我的testing显示自动填充发生在页面加载后大约250毫秒（虽然我想这个数字很大程度上取决于如何构build和加载页面）。
这是我的JavaScript代码（使用jQuery）：
// Workaround for Safari autofill of the e-mail field with the username. // Try every 50ms during 2s to reset the e-mail to its original value. // Prevent this reset if user might have changed the e-mail himself, by // detecting focus on the field. if ($('#edit-mail').length) { var element = $('#edit-mail'); var original = element.attr('value'); var interval = setInterval(function() { if ($(document.activeElement).is(element)) { stop(); } else if (element.val() != original) { element.val(original); stop(); } }, 50); var stop = function() { clearTimeout(timeout); clearInterval(interval); } var timeout = setTimeout(function() { clearInterval(interval); }, 2000); }
我在移动Safari 10.3.1的React中突然遇到了同样的问题
在所有testing过的浏览器，甚至是Mobile Safari IOS 10.2之前，我都不需要任何棘手的解决方法
但是由于10.3.1用户名或密码将被填写在提供“密码”，“电子邮件”，“用户名”字样在任何forms的login后积极记住选项。 看起来，渲染的DOM树是使用全文search“分析”，然后用户代理填写数据，而不考虑任何自动完成=“closures”设置。 也发生在一个字段的占位符文本funnyli。 所以当你不想在这个数据没有用的地方预先填写用户名或密码的时候，你一定非常喜欢命名。
经过数小时的调查，唯一的解决办法就是在这里发布解决scheme。 提供一个名为“email”的input字段，并隐藏包含高度为0px，overflow：hidden的div。
我也被Safari的奇怪的默认自动完成行为叮咬了，但不是完全禁用它，我设法通过遵循https://www.chromium.org/developers/design-documents/form-样式，铬; – 理解 。
具体来说，我在用户名字段上input了autocomplete="username" ，在密码字段上input了autocomplete="password-current" 。 这告诉浏览器哪些字段自动填充，而不是猜测，并修复了我的用例自动完成。
这种方法适用于“电子邮件优先”login表单（密码字段不能立即显示，例如Googlelogin）以及传统的login表单，用户名和密码字段都可见。
<input name="" type="text" " autocomplete="off" onfocus="this.name='email'">
为我工作！
