Adding masking of part of the string to the input field

Question

How can I mask string from input field as soon as it is entered by the user? I would like to always show a start if the the length of the entered string exceeds the length of 8 characters. For example

12 2458 ************************

The total number of stars and remaining characters should match the entire user-entered string.

But from my code I get something like this:

12 2458 *

I would like to have a starred string in one field (hidden input) and store the string in the other field which will be saved in the database without stars.

  <input type="text" name="id_account_shown" class="form-control" placeholder="Enter your account number..." required id="id_account_shown">


  <!-- Call functions each time the value of the input field changes -->
  <script>
  $("#id_account_shown").on("input", function() {
      var accountnumber = document.getElementById('id_account_shown').value;  // form value
      var star = '*';
      var accountnumber_short = accountnumber.substring(0, 8);
      if (accountnumber.length > 8) {
      document.getElementById('id_account_shown').value = accountnumber_short + star; // change data
      }
  });
  </script>

alessandrio · Accepted Answer · 2020-06-17 17:15:34Z

//creates a variable that saves the original text and its length
var str = "",strlen=0;
$("#id_account_shown").on("input", function() {
  var accountnumber = document.getElementById('id_account_shown');
  strlen = accountnumber.value.length;
  //checks for deletion of text
  if(strlen < str.length){
    str = str.substr(0, strlen);
  } else {
    //adds each new character to the previous var
    str += accountnumber.value.slice(-1);
  }
  if (accountnumber.value.length > 8) {
    //keep the eight characters and the rest put stars
    accountnumber.value = accountnumber.value.replace(/(.+){1,8}.+/gi, "$1*");
  }
  //the show
  console.log(str);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="id_account_shown" class="form-control" placeholder="Enter your account number..." id="id_account_shown">

am2505 · Accepted Answer · 2020-06-17 15:52:34Z

1

You can try this, hope this will be helpful to you.

const inputField = $("#id_account_shown");
var inputVal = "";
$("#id_account_shown").keyup(function( event ){
      var value = inputField.val();
      var len = value.length;
      if(len>8){
        // backslash  
        if(event.which == 8){
          inputVal = inputVal.substring(0, len);
          console.log(inputVal);
          return;
        }
                inputVal += value[len-1];
        let newValue =  value.substring(0, 8) + "*".repeat(len-8);
        inputField.val(newValue);
      }
      else{
        inputVal = value;
      }
      console.log(inputVal);
});

https://jsfiddle.net/tof5x2ey/2/

answered Jun 17, 2020 at 15:52

am2505

2,43418 silver badges19 bronze badges

Collectives™ on Stack Overflow

Adding masking of part of the string to the input field

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related