When designing a secure OTP (One-Time Password) input field, most developers naturally use:
<input type="password" placeholder="Enter OTP" maxlength="4" id="enterotp" runat="server" />
It looks right — users see dots (••••), and their OTP remains hidden.
However, if you’ve tested this in Google Chrome, you might have noticed something annoying:
Chrome automatically shows its “Save Password” or “Manage Passwords” popup — even though it’s just a 4-digit OTP!
Let’s see why that happens and how to fix it cleanly.
Why Chrome Shows the Password Popup
Chrome’s password manager is designed to detect fields with type="password".
Whenever it finds one, it assumes you’re entering a login password and offers to save it.
In an OTP verification form, this behavior is unnecessary and confusing to users — we don’t want Chrome to save or remember temporary OTPs.
The Goal
We want to:
Show masked dots (••••) for better privacy
Prevent Chrome from showing any “Save Password” popup
Still allow users to enter numeric OTPs easily
The Correct Solution
Instead of using type="password", use type="text" and mask it using CSS.
Here’s the recommended HTML code:
<input
type="text"
id="enterotp"
placeholder="Enter OTP"
maxlength="4"
inputmode="numeric"
pattern="[0-9]*"
autocomplete="one-time-code"
autocorrect="off"
autocapitalize="none"
spellcheck="false"
style="-webkit-text-security: disc; text-security: disc;"
/>
Explanation
| Attribute | Purpose |
|---|
| type="text" | Prevents Chrome from treating it like a password field |
| -webkit-text-security: disc; | Makes characters appear as dots (••••) |
| autocomplete="one-time-code" | Tells the browser it’s a temporary OTP, not a password |
| inputmode="numeric" | Opens number keypad on mobile devices |
| pattern="[0-9]*" | Ensures only numeric input is accepted |
| autocorrect, autocapitalize, spellcheck | Prevent unwanted text corrections |
Demo Output
When you type 1234, you’ll see:
••••
1. Looks like a password field
2.No Chrome “Save Password” popup
3.Works perfectly for OTP entry
Optional JavaScript Validation
To ensure only digits are entered and exactly 4 digits are submitted:
document.getElementById("enterotp").addEventListener("input", function (e) {
this.value = this.value.replace(/[^0-9]/g, ''); // only numbers
if (this.value.length > 4) this.value = this.value.slice(0, 4); // max 4 digits
});
If you’re building a login or verification form, avoid type="password" for OTP inputs.
By using type="text" and masking it with CSS, you:
Maintain the familiar dot-style privacy
Stop Chrome’s password manager popup
Keep your UI clean and user-friendly
This small front-end tweak leads to a smoother user experience and prevents unnecessary password prompts.
Summary
| Problem | Solution |
|---|
| Chrome shows “Save Password” for OTP fields | Use type="text" instead of password |
| OTP should still be masked as dots | Use -webkit-text-security: disc; |
| Chrome should understand it’s a one-time code | Add autocomplete="one-time-code" |