关闭输入框自动填充 | CSS-Tricks

Mat Garland

# 2010年5月21日

为了使您的网络应用程序对iPhone和iPad友好，您还可以控制表单的输入字段中是否使用自动更正或大写。这对于用户名字段非常有用。通过实现如下代码行来实现这一点

关闭自动更正

<input type="text" name="some_name" autocorrect="off"></input>

关闭自动大写

<input type="text" name="some_name" autocapitalize="off"></input>

Montana Flynn

评论永久链接# 2010年6月2日

这是一个非常好的代码片段！谢谢！
ledonov

评论永久链接# 2011年11月29日

在表单标签中使用 autocomplete=”off” …

Ryan

# 2011年2月20日

autocomplete=”off” 在 XHTML Transitional 中不是有效的标记，而 XHTML Transitional 是一个常见的 DOCTYPE。使用此方法保持有效的标记

if (document.getElementsByTagName) {

var inputElements = document.getElementsByTagName(“input”);

for (i=0; inputElements[i]; i++) {

if (inputElements[i].className && (inputElements[i].className.indexOf(“disableAutoComplete”) != -1)) {

inputElements[i].setAttribute(“autocomplete”,”off”);

}

mohsin

评论永久链接# 2015年1月9日

它对我的 Safari 移动版有效..谢谢老兄
HASAN

评论永久链接# 2016年8月4日

不错的脚本，运行良好，

谢谢！

a dev

# 2011年9月7日

非常感谢，您解决了我的问题 :)

Mac Hary

# 2011年9月26日

谢谢……JavaScript 对我有效 :)

asd

# 2011年9月29日

asfsda

Ghost

# 2012年5月8日

有没有办法设置自动填充的样式？（无需 JavaScript）
我见过

#inputId:-webkit-autofill {
    background-color: white !important;
} (bug)

但它不起作用，而且仅适用于 Webkit 浏览器。我的“placeholder=”blabla”字体大小很大，需要自动填充。使用这种字体大小的自动填充看起来很糟糕……
所以

.search_field{font-size: 1.5em;} (input)
.search_field:-webkit-autofill{font-size: .9em;}(autofill)

:)

Paresh

# 2012年6月14日

iOS 上的自动填充功能并不总是基于正在浏览的站点而起作用。我的网络应用程序在 iPad 上浏览时，自动填充不起作用。有什么技巧可以启用它吗？请告知

Vivek Doshi

# 2012年9月5日

使用时存在一个小问题，当页面使用 w3c 验证器进行验证时，它会显示错误“没有“autocomplete”属性”

Martin Delille

# 2012年9月22日

我请求 stackexchange.com 添加此功能，并提供指向您博客文章的链接：http://meta.stackoverflow.com/q/148009/195437

kunal

# 2013年3月17日

添加表单标签 autocomplete=”off”，您无需为每个输入标签单独添加自动填充关闭。

Cormorand

# 2013年4月16日

如果您的访问者使用 Chrome，这可能不是一个好主意，kunal。

参见 http://stackoverflow.com/questions/7973462/chrome-ugly-message-when-autofill-is-disabled。

Idham Perdameian

# 2013年7月20日

谢谢，autocomplite 属性是 HTML5 的一部分，适用于以下 <input> 类型：text、search、url、tel、email、password、日期选择器、range 和 color。

BrandOwner

# 2013年7月26日

刚刚尝试在每个输入字段中添加 autocomplete=off - 这不起作用，但在整个表单中添加它则可以。

即 input autocomplete="off" / - 不行，form autocompete="off" - 可以……除非我的浏览器(s)有问题。

Paul Warelis

评论永久链接# 2016年6月9日

好吧，现在您的输入控件将不会相互“竞争”，哈哈！

Y.V.Ramana

# 2013年8月28日

刚刚尝试在每个输入字段中添加 autocomplete=off - 这不起作用，但在整个表单中添加它则可以。

即 input autocomplete=”off” / - 不行，form autocompete=”off” - 可以……除非我的浏览器(s)有问题。

Tapan Kumer Das

# 2013年10月3日

太棒了！你节省了我的时间。非常感谢。但还有一件事，它不是 w3c 有效属性。为了获得验证并仍然使用自动填充关闭功能，我们应该怎么做？提前感谢。

shaikamjad

# 2014年3月4日

伙计们，它不起作用，如果我使用 Jquery 方法关闭自动填充功能 :(

puttyshell

# 2014年4月16日

我必须交换用户名和密码字段。并让用户名浮动到左边。否则，用户名和密码会被自动填充。

Amarpreet

评论永久链接# 2015年8月27日

你好
我遇到了一个问题，如果我们在我的应用程序中点击添加新用户表单，Firefox 会使用管理员用户名和密码自动填充用户名和密码。你是如何解决这个问题的？你能解释一下吗？我需要紧急实施它。

Lienkie

# 2014年4月17日

我知道你会笑的，但我在哪里输入它？（<input…..）？我真的很想在浏览器中禁用自动填充，我无法在注册表中正确设置它。

Jair

# 2014年5月10日

以上解决方案都不适合我。 :(

Sascha Trinkaus

# 2014年5月19日

从 Chrome 34 版开始，Chrome 似乎忽略了 autocomplete 属性。

Ronak

# 2014年5月22日

$(document).ready(function(){
    $(':input').live('focus',function(){
        $(this).attr('autocomplete', 'off');
    });
});

Kushal Jayswal

评论永久链接# 2017年10月30日
删除 $(document).ready... 对我有用 :)
```
$(':input').live('focus',function(){
    $(this).attr('autocomplete', 'off');
});
```

karps

# 2014年8月11日

我已经设置了 autocomplete=”off” 属性。但 Safari 浏览器的自动填充仍在工作。如何解决自动填充关闭问题？！

Joe Johnson

# 2014年8月29日

如果您需要禁用密码字段的自动填充，请随时使用我创建的插件：https://github.com/say2joe/jquery.disable-autocomplete

salem

# 2014年12月23日

不错的代码片段！谢谢！

Cami

# 2015年5月6日

将 autocomplete 属性设置为“off”不会在较新版本的 Chrome 中禁用 Chrome 自动填充。相反，您必须按如下方式设置每个输入的 autocomplete
<input autocomplete="smartystreets">
您可以将 autocomplete 设置为除“on”或“off”之外的任何内容，它将禁用 Chrome 自动填充

CodyBlake

评论永久链接# 2018年2月23日

太棒了..为我节省了一些扯头发的时间。Chrome 弄乱了我的实时过滤器，这个技巧解决了它。

Niklas R

# 2015年5月15日

以上方法都不起作用。我尝试设置 autocomplete=off，尝试设置元标记为 no cache，尝试使用 jQuery 以编程方式设置值，还尝试将值显式设置为 null。当我们需要这个简单的功能时，为什么什么都不可能实现？HTML、CSS 和 JavaScript 这些工具如此糟糕，连简单的事情都做不好，这真是浪费时间。这是一个简单的任务，所以它应该很简单，并且应该有一个明显的解决方案，那么明显的解决方案在哪里呢？

Clint

评论永久链接# 2015年9月25日
不确定您是否还在寻找解决方案，但我遇到了同样的问题，在这个1个垃圾问题上花费了几个小时，最终找到了这个有效的解决方案。
```

<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>
```
只需将这两个伪造的字段放在表单中实际输入字段的上方，Chrome 就会自动填充这些字段。问题解决！:D

最初发现于此处
http://www.tech.theplayhub.com/disabling_chrome_autofill/

Clint

# 2015年9月25日

我之前的评论最终也不起作用了，但评论列表后面还有另一条评论对我有用。

<input readonly onfocus="this.removeAttribute('readonly');" type="text">

这基本上使该字段锁定，直到您点击它为止。对我来说，每次使用此方法都能奏效，无需使用任何其他变通方法（我尝试过所有方法，甚至用随机数字填充 URL 字符串和自动填充字段！）。

joy picar

评论永久链接# 2016年6月1日

谢谢Clint！！！这对我的确有效！！！
Random

评论永久链接# 2016年7月27日

太棒了..!! 您真是个天才..!!
PersonX

评论永久链接# 2016年11月17日

这并非在所有情况下都有效。例如，姓名文本字段，然后将密码字段设置为只读。单击密码只读字段后，您现在已将其设置为非只读，然后如果您返回并自动填充之前的姓名字段，则密码字段也将被自动填充。

Nick

# 2015年10月11日

我更愿意使用 jQuery 来执行此操作。

// 移除移动设备上的自动输入
$(‘.ginput_container input’).attr({
autocomplete: “off”,
autocapitalize: “off”,
autocorrect: “off”
});

HQF Development - Pons Olivier

# 2015年12月18日

它比所有解决方案都简单得多。转到 Stack Overflow，那里有一个完美的建议。

不要使用 autocomplete=”off”，而要使用 autocomplete=”false”。

它可以工作。

Prad

# 2016年3月7日

嗨，自动完成工作正常，但自动完成栏（位于 Android 键盘上方的栏）仍然存在，没有自动完成文本。请问有人能建议我如何使用 JavaScript 和 CSS 隐藏它吗？

Prad

# 2016年3月7日

嗨，自动完成工作正常，但自动完成栏（位于 Android 键盘上方的栏，隐藏了登录按钮）仍然存在，没有自动完成文本。请问有人能建议我如何使用 JavaScript 和 CSS 隐藏它吗？

M R Raja

# 2016年4月2日

为什么大家都不使用这个……

        <form>
            <div class="user">
            <i> </i>
            <input type="text" id="u1" name="u1" value="User Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'User Name';}">       
            </div>          
            <div class="user1"> 
            <i> </i>        
            <input type="password" id="p1" name="p1" value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}" >
            </div>
            <div class="user2">                         
            <input type="submit" value="Login">
            </div>
        </form>

它太简单了……:)

zykadelic

评论永久链接# 2018年3月14日

所以您的意思是，每次我重新聚焦一个元素时，都必须重新输入其值吗？

Gopal Sharma

# 2016年4月2日

您好，

整个页面禁用自动完成是通过在表单标签中应用此“autocomplete=off”来实现的。

  <form action="" method="post" autocomplete="off">

就是这样。
感谢大家

Slava

# 2016年6月22日

此技巧对密码字段不再有效。浏览器正在忽略自动完成。

SKOLZ

# 2016年11月30日

您可以通过向密码字段添加autocomplete="new-password"来避免密码自动完成。

pit

# 2016年12月12日

尝试 autocomplete=”false”

jfroffice

# 2017年2月22日

在表单开头使用伪造的输入字段对我有效。

<form name="my-form">
    <input style="visibility: hidden" type="text" />
    <input style="visibility: hidden" type="password" />
    <!-- here put your current form field -->
</form>

您需要将它们设置为visibility: hidden，否则 Chrome 和 FF 会忽略它。

pranjal

评论永久链接# 2018年10月15日

这在当前的 Firefox 中不起作用。

jfroffice

# 2017年2月22日

在表单开头使用伪造的输入字段对我有效。

<form name="my-form">
    <input style="visibility: hidden" type="text" />
    <input style="visibility: hidden" type="password" />
    <!-- here put your current form field -->
</form>

您需要将它们设置为visibility: hidden，否则 Chrome 和 FF 会忽略它。

Venkateshwar

评论永久链接# 2017年6月4日

嗨，

谢谢，这有效。但我使用了display: none而不是visibility: hidden，这样元素就不会占用页面空间。

再次感谢！！:)

john wayne

# 2017年4月21日

autocomplete=”false” 可以工作，只要所有文本输入字段都没有设置为 autocomplete=”false”。我必须至少保留一个输入字段可以自动完成。将所有字段都设置为 false 会取消此操作。将表单本身设置为 autocomplete=”false” 或 “off” 对我无效。

Loy

# 2017年7月20日

如何在不将文本输入设置为只读的情况下，禁用点击文本输入焦点时弹出的键盘？

Roberdo

# 2017年7月22日

autocomplete=”new-password”
在 Chrome 中 100% 有效。

Dmytro Palaniichuk

评论永久链接# 2018年1月18日

它对 Chrome 63 无效。

Terry Lin

# 2018年8月29日

您可以尝试 jQuery disableAutoFill 插件。
https://github.com/terrylinooo/jquery.disableAutoFill

acedigibits

# 2018年11月28日

所有仍然遇到此问题的人，请删除表单标签，问题即可解决。使用其他方法提交表单。自动完成会显示表单标签内输入的建议。

Mike Wax

# 2018年12月27日

有人知道如何在 Chrome v71 中删除它吗？似乎 Chrome 删除了对 autocomplete=”off” 或 autocomplete=”false” 的支持。即使 autocomplete=”new-password” 也不再起作用了。

我正在使用一个输入来进行 jQuery 过滤，但 Chrome 中的自动完成框一直覆盖我的下拉菜单。

Tommy

# 2019年3月22日

您好。我找这个找了很久。我正在使用 WordPress。我应该将它放在子主题的 functions.php 文件中吗？如果不是，我应该将所有这些代码放在哪里？

另外，为了确认，这是否会阻止所有客户在其设备上自动填充我们网站上的字段？

Divyansh Jain

# 2019年12月5日

不知道为什么，但在 Google Chrome 中将 autocomplete 属性设置为“off”对我无效。

Terry Lin

# 2021年2月25日

您好。

我的插件 jQuery disableAutoFill 插件。
https://github.com/terrylinooo/jquery.disableAutoFill 已被放弃。新版本是一个名为 disableautofill.js 的原生 JavaScript 库。
以下是链接：https://github.com/terrylinooo/disableautofill.js

评论

发表评论 取消回复

发表评论取消回复