Here is a simple input field
<input type="password">
During data input, each character is displayed in bullets (# of characters = # of bullets).
// "password" = ********
How can I only display ONE bullet despite typing more characters? By using clean JS or/and CSS.
// "password" = *
You could just add a padding at the end of your input element to hide all but one *:
input {
width: 50px;
padding-right: 40px;
box-sizing: border-box;
}<input type="password" value="Correct horse battery staple" />Why you would do this is beyond me, but it works.
Actually, running this immediately shows me the first problem with this idea: My password manager's button on the input field is large enough to completely cover that first character.