7

I need to insert a space after every four characters while the user is typing a credit card number using JavaScript .

<input type="text" size="19" maxlength="19" data-stripe="number" placeholder="1234 5678 9012 3456">

What is the best way to accomplish this ?

Arash Milani
  • 6,149
  • 2
  • 41
  • 47
soniya soniya
  • 297
  • 2
  • 3
  • 14
  • 1
    When you say "white space", do you actually mean space? White space characters are any spacing characters, like spaces, tabs and line breaks. When you say that you need to "give" the space, I suppose that you want to insert them in the value from the text box, but do you mean while the user is typing, or when you get the value? – Guffa Feb 28 '15 at 08:23
  • while user is typing. – soniya soniya Feb 28 '15 at 08:25
  • you can use jquery Mask plugin $("#phone").mask("9999 9999 9999 9999"); – Vladu Ionut Feb 28 '15 at 08:28
  • I used below code :- var el = document.getElementById('checkout_card_number'); el.addEventListener('keyup', function () { space(this, 4); }); function space(el, after) { after = after || 4; var v = el.value.replace(/[^\dA-Z]/g, ''), reg = new RegExp(".{" + after + "}","g") el.value = v.replace(reg, function (a, b, c) { return a + ' '; }); } – soniya soniya Feb 28 '15 at 08:36

4 Answers4

7

try this:

input:

<input type="text" maxlength="19" class="text" />

jquery:

$('.text').on('keyup', function() {
  var foo = $(this).val().split(" ").join(""); 
  if (foo.length > 0) {
    foo = foo.match(new RegExp('.{1,4}', 'g')).join(" ");
  }
  $(this).val(foo);
});

fiddle: https://jsfiddle.net/juspC/126/

vaneayoung
  • 353
  • 1
  • 4
  • 22
2

I see that you are using Stripe. They offer a nice plugin that will do exactly what you are looking for. Note that you can use this plugin without using Stripe:

https://github.com/stripe/jquery.payment

And if you are looking for a pure javascript and light version, I created one that will support the American Express format (15 digits) as well as Visa, MasterCard and others (16 digits):

https://stackoverflow.com/a/39804917/1895428

Watch out for the simple solutions that will replace the whole value and always put the focus at the end of the input: it can be annoying if the user edits what he previously entered.

Community
  • 1
  • 1
pmrotule
  • 9,065
  • 4
  • 50
  • 58
1

Vue input mask

Placeholder Format

  • '#' => Number (0-9)
  • 'A' => Letter in any case (a-z,A-Z)
  • 'N' => Number or letter (a-z,A-Z,0-9)
  • 'X' => Any symbol
  • '?' => Optional (next character)

For more information: Click here

// Use as plugin
Vue.use(VueMask.VueMaskPlugin);

new Vue({
  el: '#app',
  data: {
    mask_time: '##:##',
    mask_price:'###,###,###',
    mask_4s:'#### #### #### ####',
    
    placeholder_time: '23:45', 
    placeholder_4s:'1234 1234 1234 1234',
    placeholder_price: '123,123,123',
    
    time: '',  
    fourspace: '',
    price:'',

  }
})
.main{
    display: flex;
    flex-direction: column;
    }
<div id="app">
  <div class="main">
    Type time here:
    <input type="text" v-mask="mask_time" v-model="time" :placeholder="placeholder_time">
     Type 4 Space here:
     <input type="text" v-mask="mask_4s" v-model="fourspace" :placeholder="placeholder_4s">
      Enter price here:
     <input type="text" v-mask="mask_price" v-model="price" :placeholder="placeholder_price">
  </div>
</div>
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/v-mask/dist/v-mask.min.js"></script>
KING-CODE
  • 39
  • 5
-8

you can use a jquery and mask for it please check it jquery and mask for jquery you only need put a mask

$("#date").mask("9999 9999 9999 9999");

check it

marjes
  • 172
  • 15