search

nosir / cleave.js

Format input text content when you are typing...
http://nosir.github.io/cleave.js
Apache License 2.0
17.96k stars 1.62k forks source link

Format a password field #169

Closed arloduff closed 7 years ago

arloduff commented 7 years ago

So far, this has worked fine with text fields for me, but is it possible to get this to work with a password field? For example, if I wanted to be able to add hyphens to a private number but still keep it masked with asterisks so that as the user typed, it would appear as ***-****

nosir commented 7 years ago

Unfortunately, don't think this is possible with native input field.

jisaacks commented 5 years ago

This is possible, just use a regular text field instead of a password field and handle the masking yourself. I did something similar for: https://github.com/jisaacks/react-custom-password-mask

It would be great if we could have an option like mask: true that displays the input text as bullets. Having it as an extra option would allow for password fields to have a "show" button to toggle the masking, so a user can opt in to seeing what they are typing to confirm they are entering it correctly.

Would love to use a feature like this for a social security field with the options:

{blocks: [3,2,4], delimiter: '-', numericOnly: true, mask: true}

Rendering •••-••-•••• and

{blocks: [3,2,4], delimiter: '-', numericOnly: true, mask: false}

Rendering 999-99-9999 but the raw value is always 999999999.

I would be glad to help out with this feature. The trickiest part is accounting for multi-byte chars, which my linked project demonstrates how to solve that.