iOS Safari自动填充/自动填充部分无效

Question

我有一个带有表单的Web应用程序，允许用户输入他们的几个朋友的联系信息。当用户尝试使用其中一个表单字段具有焦点时弹出的“自动填充联系人”选项时，所选联系人的信息将用于页面上的所有字段，而不是将自动填充仅限制为该组字段当时关注焦点。

我查看了我在自动填充功能上找到的文档，看起来为每个字段分组应用自动完成值“section- *”应该就足够了。我猜我想要做的事情根本不可能，但是精通自动填充设置的人的输入将非常感激！

这是我的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<form>
  <fieldset class="container">
    <div class="row">
      <h2>First Friend</h2>
    </div>
    <div class="row">
      <div>
        <label for="SendRequestTo1FirstName">First Name</label>
        <input type="text" id="SendRequestTo1FirstName" name="SendRequestTo1FirstName" maxlength="50" autocomplete="section-friend1" />
      </div>
      <div>
        <label for="SendRequestTo1LastName">Last Name</label>
        <input type="text" id="SendRequestTo1LastName" name="SendRequestTo1LastName" maxlength="50" autocomplete="section-friend1" />
      </div>
      <div>
        <label for="SendRequestTo1Phone">Phone Number</label>
        <input type="tel" placeholder="[phone]" id="SendRequestTo1Phone" maxlength="20" autocomplete="section-friend1" />
      </div>
    </div>
  </fieldset>

  <hr>

  <fieldset class="container">
    <div class="row">
      <h2>Second Friend</h2>
    </div>
    <div class="row">
      <div>
        <label for="SendRequestTo2FirstName">First Name</label>
        <input type="text" id="SendRequestTo2FirstName" name="SendRequestTo2FirstName" maxlength="50" autocomplete="section-friend2" />
      </div>
      <div>
        <label for="SendRequestTo2LastName">Last Name</label>
        <input type="text" id="SendRequestTo2LastName" name="SendRequestTo2LastName" maxlength="50" autocomplete="section-friend2" />
      </div>
      <div>
        <label for="SendRequestTo2Phone">Phone Number</label>
        <input type="tel" placeholder="[phone]" id="SendRequestTo2Phone" maxlength="20" autocomplete="section-friend2" />
      </div>
    </div>
  </fieldset>
</form>

Answer 1

看起来你有section-*如何工作的一部分，你只需要在你的部分识别后包括一个令牌。

例如section-friend1 given-name：

    <label for="SendRequestTo1FirstName">First Name</label>
    <input type="text" id="SendRequestTo1FirstName" name="SendRequestTo1FirstName" maxlength="50" autocomplete="section-friend1 given-name" />

以下是规范中的示例，其中包含一些示例和可用的令牌。 https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute

更新：

Safari Caveats Safari在自动完成方面非常糟糕。没有关于它正在寻找什么的任何文档，并且似乎没有使用任何autocomplete标准。它似乎使用id属性和name属性的混合，或查看<label>内容的输入。

以下是我发现的有关桌面和iOS Safari工作的最佳资源：

博客：https://cloudfour.com/thinks/autofill-what-web-devs-should-know-but-dont/

Codepen：https://codepen.io/grigs/pen/YqoyWv

信用卡自动填充：需要https才能使自动填充功能适用于信用卡。自签名证书不适用于Safari iOS（包括ChromeiOS），但适用于桌面版。

希望这可以帮助！