jQuery禁用输入框自动完成功能

Question

我有这段代码：

HTML部分：

<input id="register_username" type="text">
<input id="register_password" type="text">
<input id="register_repeatpassword" type="text">
<input id="register_email" type="text">

Jquery：

$(document).ready(function(){
    $('#register_username').attr('autocomplete','off');
    $('#register_password').attr('autocomplete','off');
    $('#register_repeatpassword').attr('autocomplete','off');
    $('#register_email').attr('autocomplete','off');
    });

我希望禁用一些浏览器提供的自动完成功能，实际上让用户输入整个字段，但代码无法正常工作，下拉菜单仍然出现，并且用户仍然可以选择之前键入的内容。我也尝试使用 autocomplete="off" 但没有任何效果。我在这里做错了什么？

- Max Pain

---

“在我的机器上可以运行”（http://www.codinghorror.com/blog/2007/03/the-works-on-my-machine-certification-program.html）(tm) - Brad Christie

对我来说，在Chrome（v 41.0.2272.89）上忽略了autocomplete =“off”，起初我以为是因为在页面加载后通过jquery更改属性，但即使直接在输入框中插入autocomplete =“off”也无法解决问题。这篇文章可能与此问题有关。 - Murilo Garcia

Answer 1

只需添加：

autocomplete="off"

例如，将属性添加到 INPUT 元素，例如：

<input autocomplete="off" id="register_username" type="text" name="username">

- David Hellsing

---

或者也可以将 autocomplete="off" 属性添加到 <form> 节点中。 （顺便说一句，我认为根本问题在于，当 jQuery 在加载后应用此属性时似乎无法正常工作，因为 OP 正在添加这个属性）。 - Brad Christie

@MaxPain 你用的是哪款浏览器？你能发布一个 fiddle 吗？ - David Hellsing

Answer 2

jQuery版本：

$("#register_username").attr("autocomplete", "off");

- Carl Smith

---

这并没有提供问题的答案。如果您想对作者进行批评或请求澄清，请在他们的帖子下留言。 - Tenfour04

这与所有其他答案相同，只是它使用jQuery，这就是它所声称的。 - Carl Smith

OP询问了他们自己的代码有什么问题，而不是寻求其他方法来解决。一些其他答案也没有回答OP的问题，但是审核队列并没有一次呈现所有答案供审核。 - Tenfour04

无论如何，那是三年前的事了...今天我不会费心去评论这样的事情，因为它仍然对人们有所帮助。 :) - Tenfour04

Answer 3

如果有人在这里想要关闭他们的jQuery自动完成功能：

$("#elementId").autocomplete({
  disabled: true
  });

- Jar

---

谢谢您的建议。尝试使用$("#id").attr("autcomplete", "off")或false或其他值都没有起作用，但是您的解决方案有效。 - cminus

太棒了，一定要点个赞！ - Jar

Answer 4

请查看这个代码示例

 document.getElementById("register_username").autocomplete="off"

- rajesh kakawat

Answer 5

现在你需要将“off”更改为另一个随机字符串，如“nope”：

Jquery：

$("#register_username").attr("autocomplete", "nope");

HTML：

<input id="register_username" type="text" autocomplete="nope">

- Cava

Answer 6

尽管我同意autocomplete="off"应该被广泛支持并且是最终解决方案，但它不能正常工作可能是由于HTML5规范对自动完成属性的规定：

自动完成机制必须由用户代理实现，就好像用户修改了元素的值一样，并且必须在元素可变的时间（例如，在元素插入文档后或用户代理停止解析时）执行。

对我来说，这意味着它应该是元素的“原始”属性，而不能在渲染后添加。由于大多数浏览器正在实现新规范¹，如果他们之前允许使用JavaScript，则很有可能根据上述规范进行了更正。

如果您还没有尝试过，请直接将属性添加到控件，而不是依赖于jQuery在[可能是]文档准备就绪时执行。

¹ 我在这里使用“规范”一词，因为HTML5并不是一个标准，但很多浏览器正在实现一些更具体的功能。由于autocomplete从IE5就已经存在了，它可能是可以考虑安全实现的其中之一。

- Brad Christie

---

我尝试了这个代码：<input id="register_username" type="text" name="username" autocomplete="off">，但仍然存在同样的问题。 - Max Pain

@MaxPain：如果你去到 about:config，是不是设置了 Wallet.crypto.autocompleteoverride？ - Brad Christie

我不确定那是什么。我猜不是。 - Max Pain

@MaxPain：简单来说，有一些可插入的组件可以强制FF记住密码，即使网站管理员设置了偏好（例如设置autocomplete="off"）。我只是检查一下这种情况是否存在。 - Brad Christie

Answer 7

<form id='myForm'>
    <input id="register_username" type="text">
    <input id="register_password" type="text">
    <input id="register_repeatpassword" type="text">
    <input id="register_email" type="text">
</form>
$(document).ready(function(){
    $('#myForm').on( 'focus', ':input', function(){
        $(this).attr( 'autocomplete', 'off' );
    });
});

- Prakash

Answer 8

截至2019年4月23日，该方法有效。

如果您想在页面上禁用Chrome的自动填充功能，特别是如果您不使用表单而是使用序列化的jQuery选择器提交数据。

对我来说，在运行时进行操作效果最好，而且Chrome无论如何都会在运行时进行自动填充，因此这是一个合理的解决方案来对抗Chrome的行为。

只需在代码底部添加以下内容即可，Chrome将不会尝试强制自动填充内容：

<script>
    $(document).ready(function () {
        $("input").attr("autocomplete", "new-password");
    });
</script>

- Wadih M.

---

无法工作：Chrome 75.0.3770.142。只有在直接将autocomplete ='off'属性放在输入元素上时才能正常工作。稍后通过js进行的任何操作都会被简单地忽略。 - okieh

Answer 9

对于仍然遇到此问题的人，这些解决方案的组合是唯一有效的。基于此脚本： https://github.com/terrylinooo/jquery.disableAutoFill

<form id="myForm">...</form>

把这些放在你网页的页脚：

    <script src="https://cdn.jsdelivr.net/npm/disableautofill/src/jquery.disableAutoFill.min.js"></script> 
    
<script>
        $(document).ready(function () {
            $("input").attr("autocomplete", "new-password");
            $('#myForm').disableAutoFill();
        });
    </script>

- Alex Kushner

Answer 10

使用jQuery，我会在布局页面或每个网页上都存在的一小部分HTML中执行此操作。

$(document).ready(function () {

        //when the page is done loading, disable autocomplete on all inputs[text]
        $('input[type="text"]').attr('autocomplete', 'off');

        //do the same when a bootstrap modal dialog is opened
        $(window).on('shown.bs.modal', function () {
            $('input[type="text"]').attr('autocomplete', 'off');
        });
});

- Francis Ducharme