I'm making a PWA using React. (And using Material-UI and Formik on the component in question, so syntax may seem a bit unusual...)
I wanted to stop Chrome from trying to save login credentials (because devices are shared with many users in my situation).
For the input (MUI TextField in my case), I set the type to "text" rather than "password" in order to get around Chromes detection for the store-credentials-feature. I made input-mode as "numeric" to get the keypad to pop up as the keyboard, because users will input a PIN for their password.
And then, as others here described, I used text-security: disc; and -webkit-text-security: disc;
Again, careful of my code's syntax, as it's using React, MUI, etc. (React uses capital letters and no dashes, etc.)
See the parts with the // comment; the rest is just bonus for context.
<TextField
type="text" // this is a hack so Chrome does not offer saved credentials; should be "password" otherwise
name="pincode"
placeholder="pin"
value={values[PIN_FIELD]}
onChange={handleChange}
onBlur={handleBlur}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<RemoveRedEye
color="action"
onClick={togglePasswordMask}
/>
</InputAdornment>
),
inputProps: {
inputMode: 'numeric', // for number keyboard
style: {
textSecurity: `${passwordIsMasked ? 'disc' : ''} `, // part of hack described above. this disc mimics the password *** appearance
WebkitTextSecurity: `${passwordIsMasked ? 'disc' : ''} `, // same hack
},
},
}}
/>
As you can see, I have a toggle that lets you hide or show the pin (by clicking the eye icon). A similar function could be added as appropriate / desired.
const [passwordIsMasked, setPasswordIsMasked] = useState(true)
const togglePasswordMask = () => {
setPasswordIsMasked((value) => !value)
}