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


当前回答

可以说,我想要一种可以将现场管理完全从浏览器手中拿走的东西。在本例中,有一个标准的文本输入字段来捕获密码-没有电子邮件、用户名等。。。

<input id='input_password' type='text' autocomplete='off' autofocus>

有一个名为“input”的变量,设置为空字符串。。。

var input = "";

jQuery监视字段事件。。。

聚焦时,始终清除字段内容和关联的“输入”变量。在按键时,任何字母数字字符以及一些定义的符号都会附加到“input”变量,并且字段输入会替换为项目符号。此外,当按下Enter键时,键入的字符(存储在“input”变量中)将通过Ajax发送到服务器。(请参阅下面的“服务器详细信息”。)在设置键时,Home、End和Arrow键会刷新“input”变量和字段值。(我可能会对箭头导航和焦点事件产生兴趣,并使用.selectionStart来确定用户单击或正在导航的位置,但不值得为密码字段付出努力。)此外,按下Backspace键会相应地截断变量和字段内容。


$("#input_password").off().on("focus", function(event) {
    $(this).val("");
    input = "";

}).on("keypress", function(event) {
    event.preventDefault();

    if (event.key !== "Enter" && event.key.match(/^[0-9a-z!@#\$%&*-_]/)) {
        $(this).val( $(this).val() + "•" );
        input += event.key;
    }
    else if (event.key == "Enter") {
        var params = {};
        params.password = input;

        $.post(SERVER_URL, params, function(data, status, ajax) {
            location.reload();
        });
    }

}).on("keyup", function(event) {
    var navigationKeys = ["Home", "End", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"];
    if ($.inArray(event.key, navigationKeys) > -1) {
        event.preventDefault();
        $(this).val("");
        input = "";
    }
    else if (event.key == "Backspace") {
        var length = $(this).val().length - 1 > 0 ? $(this).val().length : 0;
        input = input.substring(0, length);
    }
});

前端摘要

本质上,这使浏览器无法捕获任何有用的内容。即使它覆盖了自动完成设置,和/或显示了一个包含先前输入值的下拉列表,它也只存储字段值的项目符号。


服务器详细信息(可选阅读)

如上所示,一旦服务器返回JSON响应,JavaScript就会执行location.reload()。(此登录技术用于访问受限制的管理工具。与cookie内容相关的一些过度使用可以被跳过,以实现更广泛的实现。)以下是详细信息:

当用户导航到站点时,服务器会查找合法的cookie。如果没有任何cookie,将显示登录页面。当用户输入密码并通过Ajax发送,服务器确认密码并检查以查看用户的IP地址是否在授权IP地址列表中。如果无法识别密码或IP地址,则服务器不会生成cookie,因此当页面重新加载时,用户会看到相同的登录页面。如果密码和IP地址都被识别,服务器将生成cookie具有十分钟的使用寿命,它还存储与时间帧和IP地址相对应的两个加扰值。当页面重新加载时,服务器会找到cookie并验证加扰值是正确的(即时间帧与cookie的日期相对应并且IP地址相同)。每当用户与服务器交互时,无论他们是登录、显示数据还是更新记录,都会重复验证和更新cookie的过程。如果cookie的值始终正确,服务器将显示完整的网站(如果用户正在登录)或满足提交的任何显示或更新请求。如果在任何时候cookie的值不正确,服务器会删除当前cookie,然后在重新加载时,会导致登录页面重新显示。

其他回答

不要使用JAVASCRIPT修复此问题!!

首先使用HTML解决此问题,以防浏览器未使用脚本、无法使用您的脚本版本或脚本已关闭。请始终在HTML之上最后一层脚本。

对于具有“text”类型属性的常规输入表单字段,请在元素上添加autocomplete=“off”。由于用户浏览器覆盖设置,这可能在现代HTML5浏览器中不起作用,但它会照顾到许多旧浏览器,并停止大多数浏览器中的自动完成下拉选项。注意,我还包括了所有其他可能会让用户感到不快的自动完成选项,如autocapitalize=“off”、autocorrect=“off”和spellcheck=“false”。许多浏览器不支持这些功能,但它们增加了额外的“附加”功能,这会让数据输入人员感到烦恼。注意,例如,如果用户的浏览器设置为启用了自动填充,Chrome会忽略“关闭”。因此,实现浏览器设置可以覆盖此属性。

例子:

<input type="text" id="myfield" name="myfield" size="20" value="" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" tabindex="0" placeholder="Enter something here..." title="Enter Something" aria-label="Something" required="required" aria-required="true" />

对于用户名和密码输入类型字段,对于触发“关闭”功能的更具体的自动完成属性,浏览器的支持有限。用于登录的文本输入上的autocomplete=“username”将迫使某些浏览器重置并删除自动完成功能。autocomplete=“new password”将尝试使用“password”类型输入字段对密码执行相同操作。(见下文)。然而,这些是特定浏览器的专有技术,在大多数情况下都会失败。不支持这些功能的浏览器包括Internet Explorer 1-11、许多Safari和Opera桌面浏览器,以及一些版本的iPhone和Android默认浏览器。但它们提供了额外的力量来尝试并强制删除自动完成。

例子:

<input type="text" id="username" name="username" size="20" value="" autocomplete="username" autocapitalize="off" autocorrect="off" spellcheck="false" tabindex="0" placeholder="Enter username here..." title="Enter Username" aria-label="Username" required="required" aria-required="true" />
<input type="password" id="password" name="password" size="20" minlength="8" maxlength="12" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,12}" value="" autocomplete="new-password" autocapitalize="off" autocorrect="off" spellcheck="false" tabindex="0" placeholder="Enter password here..." title="Enter Password: (8-12) characters, must contain one number, one uppercase and lowercase letter" aria-label="Password" required="required" aria-required="true" />

现在寻找更好的解决方案!

由于标准机构和浏览器对HTML5的支持分散,许多现代HTML5属性在许多浏览器中都失败了。所以,一些孩子转向脚本来填补这些漏洞。但这是懒惰的编程。使用JavaScript隐藏或重写HTML会使情况变得更糟,因为您现在有一层又一层的脚本依赖关系,再加上HTML补丁。避免这种情况!

要在表单和字段中永久禁用此功能,最好的方法是每次在“input”元素上创建一个自定义的“id”/“name”值,使用一个唯一的值,如连接到字段id和name属性的日期或时间,并确保它们匹配(例如“name=password_{date}”)。

<input type="text" id="password_20211013" name="password_20211013" />

这破坏了愚蠢的浏览器自动完成选择算法,该算法会嗅探触发这些字段过去值的匹配名称。通过这样做,浏览器无法将以前表单数据的缓存与您的匹配。它将强制关闭“自动完成”,或显示空白列表,并且不再显示任何以前的密码!在服务器端,您可以创建这些自定义输入“命名”字段,并通过简单地解析id/name的第一部分,从用户浏览器的响应中识别和提取正确的字段。例如“password_”或“username_”等。当字段的“name”值出现时,只需解析第一部分(“password_{date}”)并忽略其余部分,然后在服务器上提取值。

容易的

<input type="text" name="attendees" id="autocomplete-custom-append">

<script>
  /* AUTOCOMPLETE */

  function init_autocomplete() {

    if (typeof ($.fn.autocomplete) === 'undefined') {
      return;
    }
    // console.log('init_autocomplete');

    var attendees = {
      1: "Shedrack Godson",
      2: "Hellen Thobias Mgeni",
      3: "Gerald Sanga",
      4: "Tabitha Godson",
      5: "Neema Oscar Mracha"
    };

    var countriesArray = $.map(countries, function (value, key) {
      return {
        value: value,
        data: key
      };
    });

    // initialize autocomplete with custom appendTo
    $('#autocomplete-custom-append').autocomplete({
      lookup: countriesArray
    });

  };
</script>

我必须花了两天的时间来讨论这一问题,然后才能制定自己的解决方案:

首先,如果它适用于任务,则放弃输入并使用文本区域。据我所知,自动填充/自动完成在文本区域没有业务,就我们正在努力实现的目标而言,这是一个很好的开始。现在,您只需更改该元素的一些默认行为,使其充当输入。

接下来,您将希望将任何长条目保持在同一行上,如输入,并希望文本区域与光标一起沿y轴滚动。我们还想去掉调整大小框,因为我们正在尽力模拟输入的行为,而输入没有调整大小句柄。我们通过一些快速CSS实现了所有这些:

#您的文本区域{调整大小:无;overflow-y:隐藏;空白:nowrap;}

最后,您需要确保讨厌的滚动条不会出现,破坏聚会(对于那些特别长的条目),因此确保文本区域不会显示:

#您的文本区域::-webkit滚动条{显示:无;}

轻松点。此解决方案没有自动完成问题。

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

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

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

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

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

使用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>

您可以在输入中使用它。

例如

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