You are viewing limited content. For full access, please sign in.

Discussion

Discussion

Forms, Javascript and Password Masks

Forms
Updated July 26, 2022
posted on July 2, 2014 • Show version history

We have a situation where we have a form field for a password, but need to mask each character after the user types it.  We were able to mask the entire field and transfer the true value to a different field using this code:

 

$(document).ready(function () {
           $(".Dem_Mask input").blur(function () {

            //Capture the value entered from the input field
            var Dem_Log_In = $(this).val();

            //Mask the input field with a string
            if ($(this).val() != '*******') {
            $(this).val('*******');

            //Transfer the value to a second field
            $('#q2 input').val(Dem_Log_In);  
                         
            }        
          });
        });

 

But now need to do this one character at a time, i.e. as each character is typed.  The likely events look like

 

$(".Dem_Mask input").val().change(function ()

 

or the js onkeypressevent

 

Unfortunately, we can't seem to get these to fire while the user is typing in the character box.  Are these supported in forms in the way we need?

0 0
replied on July 3, 2014 • Show version history

Thanks, Eric

 

First my method was wrong - it should have been keypress, not onkeypress.  Second, the behavior of keypress is interesting.  It fires the moment the key is pressed, and before the character is added to the field.  So, keypress always processes the last character typed, and not the character the user is in the act of typing.  As you suggested, we found that keyup did the trick.

 

Lastly, we have the hidden field well below the fold, and hide it in the blur event.  We only care that the user not see the letters typed for long.  This particular form requires two user logins, and the users don't trust each other.  Feel free to add a true password mask field type to the next version of Forms!

 

The jquery library really is useful, btw, thanks for including that in the documentation.

0 0
View 4 previous replies
replied on July 3, 2014

You're welcome! I'm glad it's been helpful. We'll keep the password feature request in mind.

0 0
replied on November 10, 2014

Was there ever a full example of this posted?  I am attempting something similar.

0 0
replied on November 11, 2014 • Show version history

Hi Jeremy - 

I am not at liberty to post the code here, but in broad terms:

-- You need a field to capture the password the user is entering, and a second field below the fold to store the password.  

--On the KeyUp event, take the last character the user typed in the first/entry field and add it to the second field. Replace the value of the first field with an asterisk, padding it to the length of the password the user had typed up to that point, using the length property to make it look normal to the user.  The jsQuery KeyUp event was the real trick, thanks again, Eric!

--The second field  has to be named after the CSS name, from the Advanced tab,

--If the password entered checks out, you can hide the first field, if not, bring focus back to it for another attempt.

--We ended up building a surprising number of small supporting functions and RegEx checks for something that initially seemed pretty simple.

--Note that this was a special case where two users were looking at a form at the same time, both needed to authenticate the same form, each had their own password, and we needed to prevent the other from getting the other user's password.  It sounds odd, but think election results/poll monitoring.  I am not sure how they kept each other from looking at the keyboards, but that was not my problem -

1 0
replied on November 12, 2014

So, we ended up using something way more simpler.

$("#q3 input").attr("type", "password");

This will mask the password as it is being typed, and you can use it within Forms for  lookup rules.  It also does not show the text input during element inspection.

8 0
replied on May 24, 2022

We have a scenario where we want to mask a Social Security Number being entered in the form. Yes we can do the simpler password type JavaScript option, but this also covers up the dashes. We would like to only replace the numbers with asterisks, not the dashes. That way the user doesn't forget how many characters they entered. Does anyone have any examples of code of how to do this with JavaScript? 

 

0 0
replied on July 22, 2022

Zach did you find a way to mask a SSN? We are looking to do the same, but would like to use the last 4 of an entered SSN in secondary forms as well.

0 0
replied on July 26, 2022

We did figure out a way to mask the SSN with the help our VAR, OPG-3. I posted how we did it on another Answers post. See here: https://answers.laserfiche.com/questions/199019/Replace-Digits-with-Asterisks-In-Forms#200053

0 0
replied on July 3, 2014

You could try using jQuery's .keyup() event method, and then look at the key that was pressed and add it to your hidden field. Keep in mind that faking password fields this way is not secure, since you're still storing the password in a hidden field that anyone could inspect.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...