8

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?

koolkat
  • 706
  • 3
  • 8
  • 23
  • Answer might be here: https://stackoverflow.com/questions/32775342/how-to-disable-chromes-saved-password-prompt-setting-through-javascript/32775859 – tomericco Dec 19 '18 at 16:46

3 Answers3

27

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;
FluffySamurai
  • 558
  • 5
  • 9
5

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.

Carlos Zapata
  • 161
  • 2
  • 7
4

You're looking for <input type="password">, which does exactly that.

SLaks
  • 868,454
  • 176
  • 1,908
  • 1,964
  • 1
    From my question, "Using the tag with type=password is not an option." – koolkat Jul 19 '17 at 21:32
  • 4
    @saishreb: Why not? That's like asking "How can I insert a screw without a screwdriver?" – SLaks Jul 19 '17 at 21:34
  • The custom text component that I am using for username field has been styled in a certain way which is difficult to reproduce with CSS. The password field needs to look exactly the same as the username field. – koolkat Jul 19 '17 at 21:47
  • Can we see what the username field looks like? Without it we don't really have a reference to help you. Maybe you can mask the input field. – GetBackerZ Sep 13 '18 at 14:56
  • 1
    @SLaks when we want to limit who can screw the screw... to ask a user for their password and make sure to disable `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. – Christos Lytras Jun 01 '20 at 21:02