jquery input masked digits

Question

I have input field form to enter credit card number and I want to enter first 4 and last 4 digits how can I do it?

For example: In image when I focus and fill input it must fill group 1 and group 2 characters

click see to demo

My HTML

<input type="text" name="kredi_karti" id="kredi_karti" class="form-control kredi_karti">

jQuery code:

$(document).on("focus",".kredi_karti",function(){
    $(this).mask("9999 9999 9999 9999",{placeholder:"XXXX XXXX XXXX XXXX"});
});

Answer 1

that's not so hard as you think, you can write a key down event function and store the key input in the variable and return the mask keycode to set in input, you also have to verify the key code if its delete or backspace you have to change the stored card number accordingly

here is the code which allows only numbers .. you have to extend the functionality

Allow only numbers to be typed in a textbox

Answer 2

Try this out to skip the second and third groups of numbers

$(this).mask('0000.XXXX.XXXX.0000', {
  translation: {
    'X': {
      pattern: /X/,
      fallback: 'X'
    }
  },
  placeholder: "____.XXXX.XXXX.____"
});