首页 移动开发 iOS Safari 自动填充/自动完成部分不起作用
iOS Safari 自动填充/自动完成部分不起作用
[英] iOS Safari Autofill / autocomplete sections not working
本文介绍了iOS Safari 自动填充/自动完成部分不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个带有表单的网络应用程序，允许用户输入他们几个朋友的联系信息.当用户尝试使用其中一个表单字段具有焦点时弹出的自动填充联系人"选项时，来自所选联系人的信息将用于页面上的所有字段，而不是将自动填充仅限于一组字段当时有重点.
我已经查看了有关自动填充功能的文档，看起来对每个字段分组应用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"/><表格><fieldset class="container"><div class="row"><h2>第一个朋友</h2><div class="row"><div><label for="SendRequestTo1FirstName">名字</label><input type="text" id="SendRequestTo1FirstName" name="SendRequestTo1FirstName" maxlength="50" autocomplete="section-friend1"/>
<div><label for="SendRequestTo1LastName">姓氏</label><input type="text" id="SendRequestTo1LastName" name="SendRequestTo1LastName" maxlength="50" autocomplete="section-friend1"/>
<div><label for="SendRequestTo1Phone">电话号码</label><input type="tel" placeholder="(111) 222-3333" id="SendRequestTo1Phone" maxlength="20" autocomplete="section-friend1"/>
</fieldset><小时><fieldset class="container"><div class="row"><h2>第二个朋友</h2>
<div class="row"><div><label for="SendRequestTo2FirstName">名字</label><input type="text" id="SendRequestTo2FirstName" name="SendRequestTo2FirstName" maxlength="50" autocomplete="section-friend2"/>
<div><label for="SendRequestTo2LastName">姓氏</label><input type="text" id="SendRequestTo2LastName" name="SendRequestTo2LastName" maxlength="50" autocomplete="section-friend2"/>
<div><label for="SendRequestTo2Phone">电话号码</label><input type="tel" placeholder="(111) 222-3333" id="SendRequestTo2Phone" maxlength="20" autocomplete="section-friend2"/>
</fieldset>
解决方案
看起来您对 section-* 的工作方式有所了解，您只需要在您的部分标识后包含一个标记.
例如section-friend1 given-name:
名字 <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 属性，或者查看输入的
以下是我找到的有关让桌面和 iOS Safari 都能正常工作的最佳资源:
博客:https://cloudfour.com/thinks/autofill-what-web-devs-should-know-but-dont/
代码笔:https://codepen.io/grigs/pen/YqoyWv
信用卡自动填充 :需要 https 才能使自动完成功能适用于信用卡.自签名证书不 适用于 Safari iOS(包括 ChromeiOS)，但适用于桌面设备.
希望这会有所帮助！
I have a web app with a form that allows a user to enter contact information for several of their friends. When a user attempts to use the "AutoFill Contact" option that pops up when one of the form fields has focus, the info from the selected contact is used in all fields on the page instead of limiting the autofill to just the group of fields that has focus at the time.
I've looked through the documentation I could find on the autofill feature, and it looks like applying an autocomplete value of "section-*" for each field grouping should be enough. I'm guessing what I'm trying to do simply isn't possible, but input from someone well-versed in autofill settings would be much appreciated!
Here is my code:
<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>
解决方案
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!
这篇关于iOS Safari 自动填充/自动完成部分不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
