HTML elements have many attributes that we don’t use them and maybe we don’t know all of them at all :). One of the useful attributes in form inputs is auto-complete="one-time-code”.

In most websites, Users can log in using the OTP code. When you receive the OTP code, it’s so boring to leave the browser and go to the messages and see the OTP code.

Now, I want to tell you a way to show the OTP code in the iOS keyboard like the following.

How to implement this feature?

First of all, you should set auto-complete=”one-time-code” on your input like the following:

<input type="tel" name="otp-code" auto-complete="one-time-code" />

Now, it’s time to update your SMS message. You should have "code” word in your SMS message.

For example: Code: 123456 is your verification code