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

Question

我有一个字段要求用户输入年份。我的 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

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

Answer 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.

第一个选项可以是更改字段名称。作为替代方案，我建议使用让我们加密来保护连接。根据 Google 安全博客：

从 2018 年 7 月 Chrome 68 的发布开始，Chrome 将标记 所有 HTTP 站点均“不安全”。

Answer 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>

虚拟字段使表单上的字段总数达到三个，通过阅读谷歌票证上的评论，可以停止触发警告。 这些字段被标记为隐藏和禁用，因此它们不会提交到服务器。

我发现解决这个问题的另一种方法是将参数名称从

q

更改为

query

，但这会在服务器上引起更多问题。

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

Answer 3

将您的字段名称或字段 ID 更改为其他内容。不知何故，谷歌检测到

Year

作为信用卡字段并帮助您自动填写它。

Answer 4

将页面链接从

http

更改为

https

。就这样。 例如

http://example.com

不起作用。

https://example.com

会起作用 您可以在此处获取示例代码：https://jsfiddle.net/JonathanN/j054kbgx/

Answer 5

您的问题类似于文本内容阵营分数“Fecha”或“日期”和“numero”或“数字”的问题。

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

示例：

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

Answer 6

我很高兴我仍然可以为这个问题做出贡献。浏览器似乎也会检查占位符。我发现了另一个欺骗浏览器自动填充检查的方法：我只是用西里尔字母输入 YY：占位符 =“УУ”。这是我的表单，因此您可以看到标签名称、占位符内容和其他内容：

      <form action="" >
    <div class="field">
      <label for="name">Cardholder Name</label>
      <input type="text" name="name" id="name" placeholder="e.g. Jane Appleseed" oninvalid="this.setCustomValidity(' ')"  required />
      <div class="error-message" id="error-name"></div>
    </div>

    <div class="field">
      <label for="number">Card Number</label>
      <input type="text" name="number" id="number" placeholder="e.g. 1234 5678 9123 0000" oninvalid="this.setCustomValidity(' ')"  required />
      <div class="error-message" id="error-number"></div>
    </div>   
    
    <div class="input-container">
      <div class="date-field">
        <label for="date">Exp. Date (MM/YY)</label>
        <div class="field">
          <input type="text" name="date" id="mm" placeholder="MM" oninvalid="this.setCustomValidity(' ')" required />  
          <div class="error-message" id="error-mm"></div>
        </div>
        <div class="field">
          <input type="text" name="date" id="yy" placeholder="УУ" oninvalid="this.setCustomValidity(' ')" required />
          <div class="error-message" id="error-yy"></div>
        </div>   
      </div>          
      
      <div class="cvc-field">
        <label for="cvc">CVC</label>
        <input type="text" name="cvc" id="cvc" placeholder="e.g. 123" oninvalid="this.setCustomValidity(' ')" autocomplete="off" required />
        <div class="error-message" id="error-cvc"></div>
      </div>
    </div>
    <button type="submit" onclick="submitForm()">Confirm</button>
  </form>