Javascript mask first 12 characters

Is it possible in JavaScript...

That once an <input> length = 12 characters (4111111111111111)
to show * instead of the actual first 8 characters  (************1111)

But have the real this.value still be available for calculations and saving to database
Larry Bristersr. DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

 
Pawan KumarDatabase ExpertCommented:
Please try this

Add 12 * and then add the characters from the input data ( substring from 12th character. )

var str = "4111111111111111";
var res = "************" + str.substring(12, 10000);

TESTED OUTPUT

************1111

Screen shot-
EE.jpg
0
 
Julian HansenCommented:
You can do like this
HTML
<input class="form-control" id="myinput" data-length="12" name="name">

Open in new window

jQuery
<script>
$(function() {
  $('#myinput').keyup(function(e) {
    if (this.value.length > this.dataset.length) {
      this.value = this.value.slice(0, -1) + '*';
    }
  });
});
</script>

Open in new window

Note the length is governed by the data-length attribute on the <input> element
Working sample here

EDIT
This does not answer the question asked - new solution to follow
0
 
Larry Bristersr. DeveloperAuthor Commented:
Hey JUlian.
It is reversed... sorry if I was not clear

I need everything BUT the last 4 masked.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Pawan KumarDatabase ExpertCommented:
>>I need everything BUT the last 4 masked.

Please use this -

str = "4111111111111111";
str = str.replace(/\d(?=\d{4})/g, "*");
document.write(str)

OUTPUT

************1111

EE.jpg
ref-https://stackoverflow.com/questions/27545202/masking-last-4-digits-in-javascript
0
 
Julian HansenCommented:
It is reversed... sorry if I was not clear
I saw that after my post - hence my edit - working on an alternative now
0
 
Pawan KumarDatabase ExpertCommented:
Hi lrbrister,

Have you tried my working suggestions ?
0
 
Julian HansenCommented:
Just to be clear - is this a field you type into or one that will be pre-loaded with a value?

If typing - how do you want the input to behave while you are typing < 8 chars - what gets displayed?
0
 
Larry Bristersr. DeveloperAuthor Commented:
Julian,
 This is something that will be typed into only.

I need to pass along the actual value not the "masked" value
0
 
Julian HansenCommented:
I need to pass along the actual value not the "masked" value
Understood so we need to shadow the value - but you did not answer my other question.

If it is masking while typing - then what happens when there are less than 8 chars in the input?
Do you mask them all out?
Do we show the last 4 regardless?

Just need the rule on how to progressively show / hide the mask until we get to > 8
0
 
Ryan ChongCommented:
Is it possible in JavaScript...

That once an <input> length = 12 characters (4111111111111111)
to show * instead of the actual first 8 characters  (************1111)
just an alternative suggestion.

why not just create 2 fields, one for password field (with 8 chars length) one for normal text field (with 4 chars length)?
you can detect the char length in the password field, if it's 8 chars length then jump the focus to normal text field to key in the rest of char.

what you need is to format the fields properly so that it looks nice and user-friendly.
1
 
Larry Bristersr. DeveloperAuthor Commented:
Ryan
You gave an example?
0
 
Ryan ChongCommented:
you probably can modify this:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-3.2.1.js"></script>
    <script type="text/javascript">
      $(function(){
      $('#first,#second').keyup(function(e){
      if($(this).val().length==$(this).attr('maxlength'))
      $(this).next(':input').focus();
      });

      $('#btn').click(function(){
      alert("You have entered: " + $('#first').val() + $('#second').val());
      $('#first').focus();
      });

      $('input:first').focus();
      });
    </script>
  </head>
  <body>
    <form>
      Please enter: <input type="password" id="first" name="first" maxlength="8" value="" size="7" /><input type="text" id="second" name="second " maxlength="4" value="" size="2" />
      <br></br><input type="button" id="btn" value="test" />
      <input type="reset" id="reset" value="reset" />
    </form>
  </body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by ConnectWise

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
 
Larry Bristersr. DeveloperAuthor Commented:
Terribly sorry for late get-back.

Thanks guys
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.