HTML 자동 완성 SMS 코드

주변에서 본 적이 있을 것입니다. SMS 코드를 입력하면 입력 필드에 나타납니다.

그러나 이것이 HTML에서 달성하기 매우 쉽다는 것을 알고 계셨습니까?
예, HTML, 화려한 JavaScript, 아무것도 없습니다!

내가 말하는 내용은 다음과 같습니다.

HTML 구조

이것이 작동하려면 몇 가지 속성이 있는 특정 입력 요소가 필요합니다.

<input
  type="text"
  name="token"
  inputmode="numeric"
  pattern="[0-9]"
  autocomplete="one-time-code"
/>

보시다시피 숫자 입력을 렌더링하여 모바일 장치에 숫자 키보드를 표시합니다.
그러나 적절한 마법은 autocomplete 필드에 있습니다. one-time-code는 사용자를 돕기 위해 사용됩니다.

Note: The are multiple autocomplete values we can use: Read more on MDN

다음 Codepen에서 전체 HTML 구조를 찾을 수 있습니다.

브라우저 지원

불행히도 이것은 현재 Safari와 iOS에서만 작동합니다.
일반적으로 자동 완성은 꽤 잘 지원됩니다.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나