Masking in JQuery

Rajnilari2015
Posted by in jQuery category on for Beginner level | Points: 250 | Views : 1023 red flag
Rating: 5 out of 5  
 1 vote(s)

Data masking is a very common requirement in the front end side in many projects. In this article, we will see how to perform masking using jQuery with suitable example.


 Download source code for Masking in JQuery

Recommendation
Read Map and Reduce function of Javascript before this article.

Introduction

Suppose we have a text box control where the person want's to type the Credit Card Number(CCN). 

Let's take a scenario of Credit card number

A typical CCN looks like 4859 4752 4856 1586. As soon as the character passed on to the 8th character, the masking will start by displaying asterisk (*) which will go on till 15th character and again the numbers will be visible in the text box from 16th character on wards. So the final output will be 4859 47** **** 1586. And also we need to retain the original value.

The solution needs to be provided by using JQuery. In this article we will look into the problem by providing a solution with an explanation for the same.

Masking code in jQuery

Let us first look into the code

<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<script type="text/javascript">

var originalValue = "";

    $(document).ready(function() {

      $("#txtCCN").keyup(function(e) { 
        
            originalValue += String.fromCharCode(e.which);
            var CCNValue = $(this).val();
            $(this).val(CCNValue.substring(0, 7) + CCNValue.substring(7, 15).replace(/[0-9]/g , "*") + CCNValue.substring(15));
      });

      $('#btnOriginal').click(function(){
        alert(originalValue);
      });

});
</script>
<body>
    Credit Card number: <input type="text" id="txtCCN" maxlength=19 /><br/>
    <input type="button" value="Original Value" id="btnOriginal" name="btnOriginal"/>
</body>
</html>

Masking Code Explanation

We have declared a variable by the name originalValue. Then by using the fromCharCode which converts a Unicode number into a character, we are capturing the values to that variable. Since the user has to type every character, henceforth, we have written the code in the Keyup function of the textbox control. The which property of the event object contains the key code of the key which was pressed to trigger the event. And the fromCharCode function converts that to character. Then we are holding the value/key being pressed to a variable CCNValue and by applying the regular expression we are replacing/masking the characters at the needed position.

CCNValue.substring(7, 15).replace(/[0-9]/g , "*")

On Original Value button click, we were displaying the original value of the Credit Card Number entered by the user in alert box.

The result

Reference

JavaScript RegExp Reference

Conclusion

Hope this article has clearly shown as how to mask the values using regular expression and we all have enjoyed the same. Thanks for reading.  Zipped file attached.

Recommendation
Read Calculator Using Arrow Function Expression of ECMAScript 6 after this article.
Page copy protected against web site content infringement by Copyscape

About the Author

Rajnilari2015
Full Name: Niladri Biswas (RNA Team)
Member Level: Platinum
Member Status: Member,Microsoft_MVP,MVP
Member Since: 3/17/2015 2:41:06 AM
Country: India
-- Thanks & Regards, RNA Team


Login to vote for this post.

Comments or Responses

Posted by: Sheonarayan on: 12/2/2015 | Points: 25
Great going Rajnilari, keep it up!
Posted by: Raja on: 12/2/2015 | Points: 25
Nice, this is what I was looking for.

Very well timed.

Thanks
Posted by: Rajnilari2015 on: 12/2/2015 | Points: 25
Sheo Sir and @Raja, thanks to both of you.

Login to post response

Comment using Facebook(Author doesn't get notification)