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

您似乎已经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/

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

自动填充信用卡：必须使用https才能使自动完成功能适用于信用卡。自签名证书不不适用于Safari iOS（包括ChromeiOS），但可以在台式机上使用。

希望这会有所帮助！

iOS Safari自动填充/自动填充部分不起作用

1 个答案: