iOS Safari Автозаполнение / автозаполнение разделов не работает

Question

У меня есть веб-приложение с формой, которая позволяет пользователю вводить контактную информацию для нескольких своих друзей. Когда пользователь пытается использовать опцию «Автозаполнение контакта», которая появляется, когда одно из полей формы имеет фокус, информация из выбранного контакта используется во всех полях на странице вместо ограничения автозаполнения только группой полей, которые имеет фокус в то время.

Я просмотрел документацию по функции автозаполнения, и похоже, что для каждой группировки полей должно быть достаточно применения значения автозаполнения "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 действительно ужасен с автозаполнением. Нет никакой документации относительно того, что он ищет, и, похоже, не используется ни один из 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), но работают на рабочем столе.

Надеюсь, это поможет!