如何从输入字段中删除“禁用自动完成”答案

【问题标题】：How to remove 'autocomplete disabled' from input field如何从输入字段中删除“禁用自动完成”
【发布时间】：2022-05-06 01:56:36
【问题描述】：

我有一个要求用户输入年份的字段。我的 html 看起来像这样

<div class="form-group {% if form_search2.year_search.errors %} error {% endif %}" style="padding: 0px;">
    <label class="col-xs-3 col-sm-2 control-label">{{ form_search2.year_search.label }}</label>
    <div class="col-xs-6" style="max-width:320px;display: inline;">
                            {{ form_search2.year_search(class='form-control', style="max-width: 300px;", placeholder="e.g. 1996-2001", autocomplete="on", type="text") }}
    </div>
    <div class="col-xs-3" style="display: inline;">
    </div>
</div>

形式定义为

year_search = TextField("Year:")

当我在浏览器 (Chrome) 中查看此表单时，我会收到消息

Automatic credit card filling is disabled because this form does not use a secure connection

我怎样才能摆脱这个？我还有其他字段以相同的原因定义，但它们会记住之前输入的内容，并通过建议旧输入来帮助用户。

【问题讨论】：

Chrome 使用一些漂亮的正则表达式来识别表单是否要求提供信用卡信息。我相信仅仅使用“年份”这个标签就足以让 Chrome 认为你在询问信用卡信息。如果表单位于不安全的页面上，则您的选择非常有限。您是否可以尝试将字段的标签更改为完全不相关的内容，仅用于测试目的？完全去掉“年”，看看是否有变化。

标签： html forms flask-wtforms

【解决方案1】：

根据autofill_regex_constants.cc.utf8文件：

// On at least one page (The China Shop2.html) we find only the labels
// "month" and "year".  So for now we match these words directly; we'll
// see if this turns out to be too general.

第一个选项选项可以是字段名称的更改。作为替代方案，我建议使用Let's encrypt 来保护连接。根据Google Security Blog：

从 2018 年 7 月开始，随着 Chrome 68 的发布，Chrome 将标记所有 HTTP 站点都被认为是“不安全的”。

【讨论】：

【解决方案2】：

这条消息很烦人。它出现在一个非常无辜的搜索框上：

<form class="homeform" action="{{ url_for('search_notices') }}" method="get">
        <input type="search" name="q" id='searchbox' placeholder="Search..."/>
        <input type="submit" class="button button-primary" value="Find tenders"/>
</form>

为了让它消失，我添加了两个虚拟表单字段：

<form class="homeform" action="{{ url_for('search_notices') }}" method="get">
        <input type="search" name="q" id='searchbox' placeholder="Search..."/>
        <input name="chrome-autofill-dummy1" style='display:none' disabled/>
        <input name="chrome-autofill-dummy2" style='display:none' disabled/>
        <input type="submit" class="button button-primary" value="Find tenders"/>
</form>

虚拟字段将表单上的字段总数增加到三个，从读取 google 票证上的 cmets 可以停止触发警告。这些字段被标记为隐藏和禁用，因此它们不会被提交到服务器。

我发现的另一种解决方法是将参数名称从q 更改为query，但这会导致服务器出现更多问题。

希望这是一个临时修复，直到我升级到 https，否则 Chrome 会删除烦人的消息。

【讨论】：

【解决方案3】：

将您的字段名称或字段 ID 更改为其他名称。不知何故，谷歌将Year 检测为信用卡字段并帮助您自动填写它。

【讨论】：

【解决方案4】：

将您的页面链接从 http 更改为 https。就这样。例如http://example.com 将不起作用。 https://example.com 将工作您可以在此处获取示例代码：https://jsfiddle.net/JonathanN/j054kbgx/

【讨论】：

【解决方案5】：

您的问题类似于文本内容阵营包含“Fecha”或“Date”和“numero”或“number”的部分。

解决方案是替换 char for 和 charref https://dev.w3.org/html5/html-author/charref

示例：

<label>numer&#1086;</label> <!--one char-->
<label>numb&#1077;r;</label> <!--one char-->

【讨论】：