如何在web表单字段/输入标记上禁用浏览器自动完成？

如何在主要浏览器中禁用特定输入（或表单字段）的自动完成？

当前回答

这是浏览器现在忽略的安全问题。浏览器使用输入名称识别和存储内容，即使开发人员认为信息是敏感的，不应存储。

在两个请求之间设置不同的输入名称将解决问题（但仍将保存在浏览器的缓存中，并且还会增加浏览器的缓存）。

要求用户激活或停用浏览器设置中的选项不是一个好的解决方案。该问题可以在后端解决。

这是解决办法。所有自动完成的元素都是使用如下隐藏输入生成的：

<?php $r = md5(rand() . microtime(TRUE)); ?>
<form method="POST" action="./">
    <input type="text" name="<?php echo $r; ?>" />
    <input type="hidden" name="__autocomplete_fix_<?php echo $r; ?>" value="username" />
    <input type="submit" name="submit" value="submit" />
</form>

然后，服务器像这样处理后置变量：（Demo）

foreach ($_POST as $key => $val) {
    $newKey = preg_replace('~^__autocomplete_fix_~', '', $key, 1, $count);
    if ($count) {
        $_POST[$val] = $_POST[$newKey];
        unset($_POST[$key], $_POST[$newKey]);
    }
}

可以照常访问该值

echo $_POST['username'];

而且浏览器将无法从以前的请求或以前的用户那里建议信息。

即使浏览器更新其技术以忽略/尊重自动完成属性，这将继续有效。

2015-06-02 20:37:10

其他回答

自动填充功能在不选择字段的情况下更改值。我们可以在状态管理中使用它来忽略选择事件之前的状态更改。

React中的一个示例：

import React, {Component} from 'react';

class NoAutoFillInput extends Component{

    constructor() {
        super();
        this.state = {
            locked: true
        }
    }

    onChange(event){
        if (!this.state.locked){
            this.props.onChange(event.target.value);
        }
    }

    render() {
        let props = {...this.props, ...{onChange: this.onChange.bind(this)}, ...{onSelect: () => this.setState({locked: false})}};
        return <input {...props}/>;
    }
}

export default NoAutoFillInput;

如果浏览器尝试填充字段，则元素仍被锁定，状态不受影响。现在，您可以用NoAutoFillInput组件替换输入字段，以防止自动填充：

<div className="form-group row">
    <div className="col-sm-2">
        <NoAutoFillInput type="text" name="myUserName" className="form-control" placeholder="Username" value={this.state.userName} onChange={value => this.setState({userName: value})}/>
    </div>
    <div className="col-sm-2">
        <NoAutoFillInput type="password" name="myPassword" className="form-control" placeholder="Password" value={this.state.password} onChange={value => this.setState({password: value})}/>
    </div>
</div>

当然，这个想法也可以用于其他JavaScript框架。

2020-03-03 12:36:51

正如其他人所说，答案是autocomplete=“off”。

然而，我认为有必要说明为什么在某些情况下使用此选项是一个好主意，因为对此问题和重复问题的一些答案表明，最好不要关闭此选项。

停止存储信用卡号的浏览器不应该留给用户。太多的用户甚至不会意识到这是一个问题。

在信用卡安全码字段上关闭它尤为重要。如本页所述：

“永远不要存储安全码……它的价值取决于这样一种假设，即提供安全码的唯一方法是从实体信用卡中读取安全码，以证明提供该安全码的人实际上持有该卡。”

问题是，如果是公共计算机（网吧、图书馆等），其他用户很容易窃取您的卡信息，甚至在您自己的计算机上，恶意网站也可能窃取自动完成的数据。

2009-01-23 21:21:39

这就是我们所说的文本框自动完成。

我们可以通过两种方式禁用文本框的自动完成：

按浏览器标签按代码要在浏览器中禁用，请转到设置

转到“高级设置”，取消选中复选框，然后单击“还原”。

如果要禁用编码标签，可以执行以下操作-

使用AutoCompleteType=“禁用”：

<asp:TextBox runat="server" ID="txt_userid" AutoCompleteType="Disabled"></asp:TextBox>

通过设置表单自动完成=“off”：

<asp:TextBox runat="server" ID="txt_userid" autocomplete="off"></asp:TextBox>

通过设置表单自动完成=“off”：

<form id="form1" runat="server" autocomplete="off">
    // Your content
</form>

通过使用.cs页面中的代码：

protected void Page_Load(object sender, EventArgs e)
{
    if(!Page.IsPostBack)
    {
        txt_userid.Attributes.Add("autocomplete", "off");
    }
}

通过使用jQuery

<head runat="server">
    <title></title>

    <script src="Scripts/jquery-1.6.4.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#txt_userid').attr('autocomplete', 'off');
        });
    </script>

2016-03-19 05:05:58

用只读存储器贴出的答案很聪明，很管用。

但当我使用Bootstrap时，只读输入字段被标记为灰色背景，直到被聚焦。当文档加载时，您可以通过简单地锁定和解锁输入来欺骗浏览器。

因此，我有一个想法将其实现到jQuery解决方案中：

jQuery(document).ready(function () {
    $("input").attr('readonly', true);
    $("input").removeAttr('readonly');
});

2016-06-16 10:43:15

您可以在输入中使用它。

例如

<input type=text name="test" autocomplete="off" />

2012-11-02 17:00:44

如何在web表单字段/输入标记上禁用浏览器自动完成？

推荐文章

最新文章

标签