Masking the values in a textbox using jQuery

Question

I have a textbox and onkeyup event I have to mask (with asterisk (*) character) a portion of the string (which is a credit card number) when user enter the values one after the other. e.g. say the value that the user will enter is 1234 5678 1234 2367.

But the textbox will display the number as 1234 56** **** 2367

I general if the user enters XXXX XXXX XXXX XXXX, the output will be XXXX XX** **** XXXX where X represents any valid number

The program needs to be done using jQuery. I have already made the program (and it is working also) which is as follows:

<html>

<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
    <script>
    $(document).ready(function() {

        $("#txtCCN").keyup(function(e) {

            var CCNValue = $(this).val();
            var CCNLength = CCNValue.length;

            $.each(CCNValue, function(i) {

                if (CCNLength <= 7) {
                    $("#txtCCN").val(CCNValue);
                } //end if

                if (CCNLength >= 8 && CCNLength <= 14) {
                    $("#txtCCN").val(CCNValue.substring(0, 7) + CCNValue.substring(7, CCNLength).replace(/[0-9]/g, "*"));
                } //end if 

                if (CCNLength >= 15) {
                    $("#txtCCN").val(CCNValue.substring(0, 7) + CCNValue.substring(7, 15).replace(/[0-9]/g, "*") + CCNValue.substring(15));
                } //end if
            });
        });
    });
    </script>
</head>

<body>
    <input type="text" id="txtCCN" maxlength=19 />
</body>
</html>

But I think that the program can be optimized/re-written in a much more elegant way.

N.B. I don't need any validation at present.

You want to make it using other plug in?try digitalbush.com/projects/masked-input-plugin — guradio
– guradio, Commented Oct 24, 2015 at 6:56

Tushar · Accepted Answer · 2015-10-24 07:29:30Z

No need of any condition of length, substring and replace can be directly used on the string of any length safely.

$(document).ready(function() {

  $("#txtCCN").keyup(function(e) {
    var CCNValue = $.trim($(this).val());

    $(this).val(CCNValue.substring(0, 7) + CCNValue.substring(7, 15).replace(/\d/g, "*") + CCNValue.substring(15));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<input type="text" id="txtCCN" maxlength=19 />

val can also be used

$(document).ready(function() {

  $("#txtCCN").keyup(function(e) {
    $(this).val(function(i, v) {
      return v.substring(0, 7) + v.substring(7, 15).replace(/\d/g, "*") + v.substring(15);
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<input type="text" id="txtCCN" maxlength=19 />

The same can be done in VanillaJS

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('txtCCN').addEventListener('keyup', function() {
    var value = this.value.trim();

    this.value = value.substring(0, 7) + value.substring(7, 15).replace(/\d/g, '*') + value.substring(15);
  }, false);
});

<input type="text" id="txtCCN" required maxlength="19" />

Tushar · Accepted Answer · 2015-10-24 07:30:54Z

2

Try It: Its 100% workable...

$(document).ready(function () {

    $("#txtCCN").keyup(function (e) {
        var CCNValue = $(this).val();
        CCNValue = CCNValue.replace(/ /g, '');

        var CCNLength = CCNValue.length;
        var m = 1;
        var arr = CCNValue.split('');
        var ccnnewval = "";

        if (arr.length > 0) {
            for (var m = 0; m < arr.length; m++) {
                if (m == 4 || m == 8 || m == 12) {
                    ccnnewval = ccnnewval + ' ';
                }

                if (m >= 6 && m <= 11) {
                    ccnnewval = ccnnewval + arr[m].replace(/[0-9]/g, "*");
                } else {
                    ccnnewval = ccnnewval + arr[m];
                }
            }
        }

        $("#txtCCN").val(ccnnewval);
    });
});

edited Oct 24, 2015 at 7:30

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

answered Oct 24, 2015 at 7:27

Chilli

1233 bronze badges

Comments

Phil Shannon · Accepted Answer · 2015-10-24 07:05:56Z

1

One thing you might consider is deleting the first two if statements. All of the work your function does is contained within the last one, so you could just change it from

if(CCNLength >= 15)

to

if(CCNLength >= 8)

This seems to maintain the functionality while cutting out some repetition in your code.

answered Oct 24, 2015 at 7:05

Phil Shannon

465 bronze badges

Comments

santon · Accepted Answer · 2015-10-24 18:56:21Z

Adding a generic routine for customizing space points and mask range in the input data. This will also respect the space characters as you originally asked for.

$(function () {
    $("#cardnum").keyup(function (e) {
        var cardNo = $(this).val();
        //Add the indices where you need a space
        addSpace.call(this, [4, 9, 14], cardNo ); 
        //Enter any valid range to add mask character.
        addMask.call(this, [7, 15], $(this).val()); //Pick the changed value to add mask 
    });

    function addSpace(spacePoints, value) {
        for (var i = 0; i < spacePoints.length; i++) {
            var point = spacePoints[i];
            if (value.length > point && value.charAt(point) !== ' ') 
                $(this).val((value.substr(0, point) + " " 
                                   + value.substr(point, value.length)));
        }
    }

    function addMask(range, value) {
        $(this).val(value.substring(0, range[0]) 
            + value.substring(range[0], range[1]).replace(/[0-9]/g, "*") 
            + value.substring(range[1]));
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="cardnum" maxlength="19" />

Collectives™ on Stack Overflow

Masking the values in a textbox using jQuery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related