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="(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

It looks like you have part of how section-* works, you just need to include a token after your section identification.

For example section-friend1 given-name:

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

Here is an example from the spec, with some examples and the available tokens. https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute

Update:

Safari Caveats Safari is really terrible with autocomplete. There isn't any documentation around what it is looking for, and doesn't seem to use any of the autocomplete standards. It seems to use a mix of id attributes and name attributes, or looks at the <label> content for the input.

Here are the best resources I found around getting both desktop and iOS Safari to work:

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

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

Credit Card autofill: https is required in order for autocomplete to work for credit cards. Self-signed certificates do not work for Safari iOS (includes ChromeiOS), but work on desktop.

Hope this helps!