iOS Safari（iPhone SE）自動完成不工作 HTML5 自動完成屬性添加

Question

We have a web form, and using the tips from iOS Safari Autofill / autocomplete sections not working however the current iOS doesn't work on the codepen here: https://codepen.io/grigs/pen/YqoyWv

是否有任何明確的方法可以自動完成 iOS Safari？

示例輸入字段是：

<div class="form-group">
   <label class="font-weight-bold input-label" for="FirstName">First name * <span class="field-validation-valid field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="true"></span></label>
   <input type="text" class="form-control input input-about-you" data-val="true" data-val-required="Please enter your first name(s)" autocomplete="given-name" id="FirstName" name="FirstName" value="">
</div>

所有其他瀏覽器都尊重 HTML5 自動完成提示，除了 iOS Safari 似乎 - 所以讓它工作會很棒。

我們正在苦苦掙扎的確切手機是 iPhone SE MX9R2B/A - 所以是 iPhone SE 2020。我確信它可能會影響其他 iOS 和 Safari。

Answer 1

codepen 示例似乎是正確的，我剛剛在iPhone SE 2nd generation - iOS14.4 Emulator 上進行了測試

SE2020 - 示例

您可能缺少的技巧是在 Safari 移動設備上啟用AutoFill來執行此操作 go 到： Settings > AutoFill > toggle Use contact info/Credit Cards （如果需要）

您也可以參考本指南Safari 的奇怪行為，它來自 2016 年，但其中解釋了很多自動填充行為。

Answer 2

你做錯了。 這是 HTML5 自動完成的正確方法

<form autocomplete="on">
    <label for="fname">First Name:</label>
    <input type="text" id="firstname" name="firstname">
</form>

希望這個答案對您有所幫助。

了解有關自動完成的更多信息： https://www.w3schools.com/tags/att_input_autocomplete.asp