iOS12ではセキュリティ周りのアップデートで、セキュリティコードの自動入力がサポートされました。

主な機能として、サインイン時のパスワード自動入力や、アカウント作成時の自動パスワード生成などがサポートされました。

以下のブログでネイティブアプリの実装を紹介しています。gif付きでわかりやすいです。

そんなアップデートの中で、地味ではありますが、SMSで受けとった認証コードを補完候補に出す、という機能が追加されました（上記のブログ内のgif参照）。

本記事では、 MobileSafari(WebView) 内で有効にするのに手間取ったのでメモ。

やったこと

記事のタイトル通りですが、 <input> タグの autocomplete 属性に one-time-code を指定することで実現可能です。

<input id="single-factor-code-text-field" autocomplete="one-time-code"/>

まとめ

HTMLはどことなくエンジニアが軽視しがちな領域ですが、正しく構造化したり、適切な属性を付与することで、メンテナンス性やアクセシビリティの向上が見込めます。

地味ではありますが、少し手を加えるだけでユーザビリティ向上につながりますね。