Masking password input in ReactJS

user_4087691 0
Viewed 45550

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?

reactjs
3 Answers

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.

user_70712210
Related