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


当前回答

三个选项:

第一:

<input type='text' autocomplete='off' />

第二:

<form action='' autocomplete='off'>

第三个(JavaScript代码):

$('input').attr('autocomplete', 'off');

其他回答

您可以在属性name how电子邮件地址中向表单添加名称,并生成电子邮件值。例如:

<form id="something-form">
  <input style="display: none" name="email" value="randomgeneratevalue"></input>
  <input type="password">
</form>

如果使用此方法,Google Chrome将无法插入自动填充密码。

如果不使用客户端和服务器端代码的组合,似乎不可能实现这一点。

为了确保用户每次都必须填写表单而不必自动完成,我使用了以下技术:

在服务器上生成表单字段名称,并使用隐藏的输入字段来存储这些名称,以便在提交到服务器时,服务器端代码可以使用生成的名称来访问字段值。这是为了阻止用户选择自动填充字段。在表单上放置每个表单字段的三个实例,并使用css隐藏每个集合的第一个和最后一个字段,然后在使用javascript加载页面后禁用它们。这是为了防止浏览器自动填写字段。

这里有一个fiddle演示了javascript、css和html,如#2所述https://jsfiddle.net/xnbxbpv4/

javascript代码:

$(document).ready(function() {
    $(".disable-input").attr("disabled", "disabled");
});

css:

.disable-input {
  display: none;
}

html格式:

<form>
<input type="email" name="username" placeholder="username" class="disable-input">
<input type="email" name="username" placeholder="username">
<input type="email" name="username" placeholder="username" class="disable-input">
<br>
<input type="password" name="password" placeholder="password" class="disable-input">
<input type="password" name="password" placeholder="password">
<input type="password" name="password" placeholder="password" class="disable-input">
<br>
<input type="submit" value="submit">
</form>

下面是一个使用asp.net和razor的服务器代码的粗略示例

型号:

public class FormModel
{
    public string Username { get; set; }
    public string Password { get; set; }
}

控制器:

public class FormController : Controller
{
    public ActionResult Form()
    {
        var m = new FormModel();

        m.Username = "F" + Guid.NewGuid().ToString();
        m.Password = "F" + Guid.NewGuid().ToString();

        return View(m);
    }

    public ActionResult Form(FormModel m)
    {
        var u = Request.Form[m.Username];
        var p = Request.Form[m.Password];

        // todo: do something with the form values

        ...

        return View(m);
    }
}

视图:

@model FormModel

@using (Html.BeginForm("Form", "Form"))
{
    @Html.HiddenFor(m => m.UserName)
    @Html.HiddenFor(m => m.Password)

    <input type="email" name="@Model.Username" placeholder="username" class="disable-input">
    <input type="email" name="@Model.Username" placeholder="username">
    <input type="email" name="@Model.Username" placeholder="username" class="disable-input">
    <br>
    <input type="password" name="@Model.Password" placeholder="password" class="disable-input">
    <input type="password" name="@Model.Password" placeholder="password">
    <input type="password" name="@Model.Password" placeholder="password" class="disable-input">
    <br>
    <input type="submit" value="submit">
}
<form name="form1" id="form1" method="post"
      autocomplete="off" action="http://www.example.com/form.cgi">

这将在Internet Explorer和Mozilla Firefox中运行。缺点是它不是XHTML标准。

添加

autocomplete=“关闭”

表单标记将禁用浏览器对该特定表单中所有输入字段的自动完成(之前在该字段中键入的内容)。

测试日期:

Firefox 3.5,4测试版Internet Explorer 8铬

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

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

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

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

<?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'];

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

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