html - iOS Safari 自动填充/自动完成部分不起作用

Question

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

我查看了我能找到的有关自动填充功能的文档，看起来对每个字段分组应用自动完成值“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="(111) 222-3333" 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="(111) 222-3333" 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 警告Safari 的自动完成功能真的很糟糕。没有关于它正在寻找什么的任何文档，并且似乎没有使用任何 autocomplete标准。它似乎混合使用了 id属性和 name属性，或查看 <label>输入的内容。

以下是我发现的有关让桌面和 iOS Safari 都能正常工作的最佳资源:

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

代码笔: https://codepen.io/grigs/pen/YqoyWv

信用卡自动填充:需要 https 才能使自动完成功能适用于信用卡。自签名证书不适适用于 Safari iOS(包括 ChromeiOS)，但适用于桌面。

希望这对您有所帮助!