HTML Autocomplete sms code

HTML Autocomplete sms code

Chris Bongers
·Mar 9, 2021·

2 min read

Listen to this article

I'm sure you've seen these around, you have to enter an SMS code, and it pops up in the input field.

But did you know this is super easy to achieve in HTML? Yes, HTML, no fancy JavaScript, nothing!

What I'm talking about looks like this:

SMS autocomplete in HTML

HTML Structure

For this to work we need a specific input element with some attributes:

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

As you can see, we render a numeric input to show the number keyboard on mobile devices. But the proper magic is in the autocomplete field. The one-time-code is used to help the user.

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

You can find the full HTML structure on the following Codepen.

Browser support

Unfortunately, this will only work in Safari and iOS at the moment. The autocomplete, in general, has pretty good support.

HTML autocomplete browser support

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Did you find this article valuable?

Support Chris Bongers by becoming a sponsor. Any amount is appreciated!

See recent sponsors Learn more about Hashnode Sponsors
 
Share this