Safari on iOS focused my input without autofocus

Safari on my physical iPhone kept focusing the puzzle-number input on Learnalist’s wordsearch page when the page loaded. The keyboard opened before I touched anything.

The fix was to remove pattern="[0-9]+" from the input. I kept inputmode="numeric" for the keyboard hint and the existing JavaScript validation for puzzle numbers.

If you have arrived here after searching for “Safari iOS input focuses without autofocus”, check your pattern attribute. Removing it stopped the behaviour in my case.

The field looked ordinary

The relevant markup looked like this:

<form novalidate>
  <label for="wordsearch-number">Enter your number</label>
  <input
    id="wordsearch-number"
    name="puzzle"
    type="text"
    inputmode="numeric"
    pattern="[0-9]+"
    autocomplete="off"
  >
  <button type="submit">Play</button>
</form>

There was no autofocus. There was an input.focus() call in our JavaScript, but it belonged to the error path after somebody submitted an invalid puzzle number. No error message appeared when the unwanted focus happened.

That distinction mattered. Finding a focus call in the source did not establish that it was running.

Following the wrong suspect

We initially tried a JavaScript blur workaround. It did not solve the problem on the phone, and it added behaviour before we understood the cause.

So we recorded the events. The page started with body as the active element. DOMContentLoaded and pageshow also reported body. A little later, the number field received focus without a preceding tap or form submission.

We wrapped HTMLElement.prototype.focus using Safari Web Inspector’s Inspector Bootstrap Script, so the wrapper would be installed before the page scripts on reload. It did not catch a JavaScript call responsible for the unwanted focus.

Then we blocked the relevant page scripts and verified they were no longer running. The field still focused.

At that point, adding more JavaScript to fight the focus seemed increasingly unhelpful.

Reducing the HTML

Changing the input ID did not stop it. Removing required did not stop it. Adding another input inside the form did stop it, which was interesting but hardly a useful fix.

A plain form with one text input did not reproduce the problem either. Something about our particular markup mattered.

Removing the numeric pattern stopped the unwanted focus on the affected phone.

Afterwards, I found Bryan Corey’s Stack Overflow answer from September 2022. It describes the same practical fix for unsolicited focus in Safari on iOS 16: remove the pattern attribute. The input type and pattern differed from ours, but the result was familiar.

That answer deserved to be easier to find.

Were we even using the pattern?

Our form already had novalidate, and the submit handler checked whether the entered number matched an available puzzle. It did not read the pattern attribute.

The attributes have separate jobs:

• pattern supplies a constraint used by browser validation.
• inputmode="numeric" hints at the appropriate input keyboard. It does not validate the value.
• novalidate skips interactive constraint validation when submitting the form. It does not remove the input’s attributes.

For this form, the pattern was redundant. The resulting input is simply:

<input
  id="wordsearch-number"
  name="puzzle"
  type="text"
  inputmode="numeric"
  autocomplete="off"
>

We kept focus feedback after an explicitly submitted invalid number. We removed the load-time blur workaround and the temporary tracing code.

What we know

Removing the pattern fixed the behaviour on the physical iPhone where we could reproduce it. Our simulator did not reproduce the original issue, so a passing simulator check alone would have missed it.

We did not establish which internal Safari mechanism caused the focus, or which other combinations of markup and iOS versions trigger it. This is a confirmed fix for our affected page, alongside an older report of similar behaviour.

The useful debugging lesson for me was to strip back the HTML attributes before adding another focus handler. In this case, the final fix was deleting an attribute we did not need.

Searched for

• Safari iOS input autofocus without autofocus
• iPhone keyboard opens on page load
• Safari numeric pattern input focus
• iOS inputmode numeric pattern autofocus

References

• Bryan Corey’s answer: removing pattern stopped unsolicited focus
• Original question: Safari in iOS 16 autofocusing form elements
• WebKit: Inspector Bootstrap Script