0

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

enter image description here

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"});
});
ani_css
  • 2,118
  • 3
  • 30
  • 73

2 Answers2

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

Community
  • 1
  • 1
abhirathore2006
  • 3,317
  • 1
  • 25
  • 29
1

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.____"
});
Season
  • 4,056
  • 2
  • 16
  • 23
  • hi I tried and it didn't work as you can see: http://codepen.io/cowardguy/pen/NAOxXy – ani_css Aug 04 '16 at 11:26
  • Oops, didnt notice the plugin of your choice. My snippet works with this one http://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js to achieve the behavior. – Season Aug 04 '16 at 11:40