How can I hide the text in an input?

Published on Mar 10, 2016 16:50

Sometimes you do not want to display the text being typed into an input box. A Password Box is one answer to this - that displays a row of *****s. However a user wanted a box for a Social Security number that was hidden using a mask like XXX-XX-1234 where the number is formatted and only the last four digits are displayed. This FAQ shows a way to do this.

This FAQ is based on code from this StackOverFlow answer

In the form Designer tab I added a Multi Field element from the Advanced elements group and added two Text Input elements to is.

The first has Name and ID 'ss_entry'; Label SS Number and Size 4 (optional)

The second has Name and ID 'ss_number'; Label a single space and Load State Disabled (as we only want this to display the masked input SS number).

In the form On Load event I have a Load CSS action with this CSS

/* set the entry font color */
#ss_entry{
  color: silver !important;
}
/* hide the label of second input */
label[for=ss_number] {
  display: none;
}

Note: the font color here is silver which makes it possible to see from close up, for extra security you can set this to invisible instead.

And also in a On Load Event a Load JavaScript action with this code:

jQuery(document).ready(function(jQ){
  jQ('#ss_entry').on('keyup', function() {
    var el, res, len, stars, result, error;
    error = false;
    el = jQ(this);
    // get the current value
    res = el.val();
    // strip out any non-digit characters
    if ( jQ.isNumeric(parseInt(res)) ) {
      res = parseInt(res);
    } else {
      res = '';
    }
    // check if the last character was valid
    if ( res != el.val() ) {
      error = true;
    }
    // get the current length
    len = res.toString().length;
    // limit to 9 digits
    if ( len > 9 ) {
      len = 9;
      res = res.toString().substring(0, 9);
      error = true;
    }
    // show the edited value
    if ( error ) {
      // show an error
      el.css('border-color', 'red');
    } else {
      // all OK
      el.css('border-color', 'silver');
    }
    el.val(res);
    // set mask for display
    if ( len > 3 ) {
      len += 1;
    }
    if ( len > 5 ) {
      len += 1;
    }
    stars = 'XXX-XX-'.substring(0, len);
    result = stars + res.toString().substring(5);
    jQ('#ss_number').val(result);
  });
});

When a key is pressed in the ss-entry element this code checks that there is an entry and it is a digit and the whole entry is no more than 9 digits and it turns the box border red if not.

It then replaces the first part of this number with the mask - there is a little extra code to handle the dashes, then shows the masked version in the second disabled element.

When the form is submitted the unmasked digits from the first ss_entry box are submitted e.g. 123456789.

Category: ChronoForms v5

Comments:

You need to login to be able to post a comment.