iOS Safari (iPhone SE) auto complete not working HTML5 autocomplete attributes added

user_1281576 0
Viewed 592

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

Is there any definitive way to get auto complete to work on iOS Safari?

And example input field is:

<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>

Every other browser respects the HTML5 autocomplete hints, except iOS Safari it seems - so would be great to get it working.

The exact phone we're struggling with is and iPhone SE MX9R2B/A - so an iPhone SE 2020. I'm sure it may affect other iOS with Safari.

autocomplete html ios
1 Answers

The codepen example seems correct, I just tested on iPhone SE 2nd generation - iOS14.4 Emulator

SE2020 - Example

The trick you might be missing is enabling AutoFill on Safari mobile to do this go to: Settings > AutoFill > toggle Use contact info/Credit Cards(if desired)

You might also refeer to this guide Safari’s strange behavior it's from 2016 but there explains a lot of the autofill behaviour.

user_87300140
Related