How to Mask OTP Input as Dots (••••) Without Triggering Chrome’s “Save Password” Popup

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"