[SOLVED] Safari in iOS 16 autofocusing form elements

Issue

This Content is from Stack Overflow. Question asked by Ellessar

I noticed that Safari in new iOS 16.0 autofocuses an input element if:

  1. type=number or text
  2. pattern=d*
  3. margin-top on containing element is 48px (I did not test the precise cut-off value here)

Test page: https://www.autoledky.sk/ios.php

autocomplete=off and autofocus=false doesn’t change anything. Before iOS 16 there were no such issues. The problem is confirmed on 2 seperate iPhones with iOS 16.

This leads to automatic homepage scrolling, enlarging and opening the keypad, which is unacceptable.
How should I solve the issue without obvious “remove input/pattern”.



Solution

I couldn’t verify the need for any margin criteria. Our scenario didn’t match the margins listed here. However I was able to fix our problem on an input[type="number"] field by removing the pattern attribute entirely since it is already a specific field time. By doing so we no longer are seeing the auto-focus in Safari on iOS16.0

I tried many things before finding this topic here and figuring out it was likely a bug, including changing tabindex, disabling javascript, working my way through every plugin on the site we used. Glad to have found someone else struggling with the same issues and having been able to narrow it down a bit more. Thanks!


This Question was asked in StackOverflow by Ellessar and Answered by Bryan Corey It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?