I am building a login page using ReactJS. I am using a custom text component built in-house, but unfortunately, it does not have a password masking option. Using the <input> tag with type=password is not an option. How can I make my password field appear masked (Dots instead of text) using Javascript/JQuery?
Is it a viable option to read each keydown event and replace the text with a dot while storing the char in a list or something on those lines?
Well, the way to achieve this is either in your JSX/HTML or by CSS for the most part.
To achieve this with JSX or HTML, you can use:
<input type="password" name="password">
To achieve this with CSS, you can use:
-webkit-text-security: disc;
text-security: disc;
I would simply condition the input type.
<input type={show_input?'text':'password'}
name='password'
id='password'
value={user.password}
onChange={handleChange}
/>
Change the value of show_input in your onChange function or add a button that changes shouw_input to true or false.
When type is password it will be masked, when it is text it will be unmasked.
You're looking for <input type="password">, which does exactly that.
autocomplete (which autoComplete="off" is not guaranteed to work in all browsers) but we also want to mask the field using browser default behavior. Use case: User has a Delete Account button but we always want to make sure the user types the password and is not auto-completed by someone else that may sit on the users computer.