I want to show all the input as stars when the user types in the credit card field except the last four digits which I want to show as numbers. I used jQuery masking but it is not giving me desired result.

I want to show all the input as stars when the user types in the credit card field except the last four digits which I want to show as numbers. I used jQuery masking but it is not giving me desired result.

• javascript
• jquery

• 9 Why do you want to do this? When a user enters his credit card he usually has the card available, i.e. someone watching could just look at the physical card... Masking the digits is just annoying and people won't expect it (pretty much no payment pany does it). Besides that, the average human will not be able to remember a credit card number by just seeing it for a few moments (unlike some passwords like "correct horse battery staple" or "123456"). – ThiefMaster Commented Oct 24, 2012 at 7:05
• 2 Not very user-friendly. How is she supposed to check the input before submitting? Showing only ***-1234 for subsequent pages makes sense, but on the input page? What is the benefit? – Thilo Commented Oct 24, 2012 at 7:05
• 1 how are you supposed to know if it's the correct credit card number? I've never encountered a Online Shop that has this functionality. Anyway <input type="password" /> should solve it – Thomas Lindvall Commented Oct 24, 2012 at 7:06
• With a name like that, I guess @ThiefMaster would know :-) – Thilo Commented Oct 24, 2012 at 7:07
• 1 @RavinderSingh isn't credit card numbers usually split up into segments out of 4 digits per segment? Which only would need your last segment to be a normal input? – Thomas Lindvall Commented Oct 24, 2012 at 7:10

5 Answers 5

you can use multiple inputs, for example:

<script type="text/javascript">
    $(function () {
        $(".card-number input[type='password']").keyup(function (event) {
            var len = $(this).val().toString().length;
            if (len == 4) {
                $(this).next().focus();
            }
        });

        $(".card-number input[type='button']").click(function () {
            var number = 0;
            $(".card-number input").not("input[type='button']").each(function (index, element) {
                number += $(element).val();
            });
            alert(number);
        });
    });



</script>

<!-- ####-####-####-#### -->
<div class="card-number" >
    <input type="password" value="" maxlength="4" />
    <input type="password" value="" maxlength="4" />
    <input type="password" value="" maxlength="4" />
    <input type="text" value="" maxlength="4" />
    <input type="button" value="go" />
</div>

I suggest to just use 2 input fields.

Otherwise use the following method. This will display the text below the password input field.

http://jsfiddle/Doinkmeister/EYgqY/9/

html

<input id="creditCard" type="password">

<div id="show"></div>​

javascript

var number = $('#creditCard');
var display = $('#show');

$('#creditCard').keyup(function(){
    if($('#creditCard').val().length < 1){
        $('#show').text('');
    }
    else{
        var a = '';
        if(number.val().length <= 8){
            for(var i = 0; i < number.val().length; i++){                
                a = a + '*';           
                display.text(a);  
            }
        }
        else
        {
            for(var i = 0; i < number.val().length; i++){ 
                if(i <= 8){
                    a = a + '*';           
                    display.text(a);  
                }
                else{          
                    a = a + number.val().substring(i,i+1);           
                    display.text(a);  
                }
            }
        }
    }
});​

I think that's what you need

function creditCardMask(number, character = "*"){
  number = number.replace(/[^0-9]+/g, ''); /*ensureOnlyNumbers*/
  var l = number.length;
  return number.substring(0,4) + character.repeat(l-8) + number.substring(l-4,l);
}

function doMaskNumber(e){
  document.querySelector("#maskedNumber").innerHTML = creditCardMask(document.querySelector("#credit-card").value);
}

Credit card number<input type="text" id="credit-card" value="1111111111">
<p id="maskedNumber"></p>
<button type="button" onclick="doMaskNumber()">Make the mask</button>

You could let this done dynamically:

window.onkeyup = function(ev) {

  val = $("the-input").val();
  for(var i = 0;i<min(digits_to_not_show,val.length-1);i++) {
   val = val.substring(0,i)+"*"+val.substr(i+1);
  }

   $("the-input").val(val);
}

The simplest implementation would start off with an <input type =password> and while input is going into that you also write the values into a <input type=text> that is hidden then when then user is done entering values change all the characters except the last four to *s and show that box and hide the password box.