Learnalist의 워드서치 페이지에서 실제 iPhone으로 접속하면 페이지가 로드될 때 숫자 입력창에 자동으로 포커스가 가고 키보드가 열렸다. 입력란의 pattern="[0-9]+"을 제거하자 문제가 멈췄으며, inputmode="numeric"과 퍼즐 번호를 확인하는 기존 자바스크립트는 유지했다.
입력란에는 autofocus가 없었다. 자바스크립트에 input.focus() 호출이 있었지만, 잘못된 퍼즐 번호를 제출했을 때 오류 경로에서만 실행됐다. 원치 않는 포커스가 발생했을 때 오류 메시지는 나타나지 않았다.
처음에는 자바스크립트로 포커스를 해제하려 했지만 해결되지 않았다. 이벤트를 기록하자 페이지 시작 시 활성 요소는 body였고, DOMContentLoaded와 pageshow에서도 마찬가지였다. 이후 탭이나 폼 제출 없이 입력란에 포커스가 갔다. Safari Web Inspector의 Inspector Bootstrap Script로 페이지 스크립트보다 먼저 HTMLElement.prototype.focus를 감쌌지만, 원치 않는 포커스를 일으킨 자바스크립트 호출은 잡히지 않았다. 페이지 스크립트를 차단해 실행되지 않는 것을 확인한 뒤에도 포커스는 계속됐다.
입력란의 ID를 바꾸거나 required를 제거해도 달라지지 않았다. 폼 안에 입력란을 하나 더 넣으면 문제가 사라졌지만, 실용적인 해결책은 아니었다. 해당 iPhone에서는 숫자 pattern을 제거하자 문제가 멈췄다. 시뮬레이터에서는 처음 문제가 재현되지 않았다.
이 폼에는 이미 novalidate가 있었고, 제출 처리기는 입력한 번호가 실제 퍼즐 목록에 있는지 확인했다. pattern 속성은 사용하지 않아 불필요했다. 세 속성의 역할은 서로 다르다. pattern은 브라우저 유효성 검사에 제약 조건을 제공하고, inputmode="numeric"은 적절한 키보드를 표시하도록 힌트를 준다. inputmode는 값을 검증하지 않는다. novalidate는 폼 제출 시 대화형 제약 조건 검사를 건너뛰지만 입력란의 속성을 제거하지는 않는다.
해당 페이지에서는 명시적으로 제출한 번호가 잘못된 경우의 포커스 안내는 유지하고, 페이지 로드 시 포커스를 해제하는 임시 처리와 추적 코드는 제거했다. iOS 사파리의 어떤 내부 동작이 원인이었는지, 다른 마크업이나 iOS 버전에서도 같은 문제가 생기는지는 확인하지 못했다.
비슷한 현상을 다룬 사례로 2022년 9월 브라이언 코리(Bryan Corey)의 Stack Overflow 답변이 있다. iOS 16 사파리에서 pattern을 제거하는 실용적인 해결책을 설명하지만, 입력 유형과 패턴은 Learnalist 사례와 달랐다. 관련 자료로 원래 질문도 제시됐다.
댓글 (0)
로그인하면 이 기사에 내 생각을 남길 수 있어요