最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Auto-format credit card number input as user types - Stack Overflow

programmeradmin0浏览0评论

I want to create an input using JavaScript that automatically formats it in the correct Credit Card format.

What I Want?

  1. The input should format input in groups of 4. e.g. If I typed in 1234567890123456, it should format it to 1234 5678 9012 3456
  2. The max length should be 16 digits. So if I typed in 1234567890123456789 it should format it to "1234 5678 9012 3456"
  3. formatting should occur as you type. So if I typed "123456" it should format it to "1234 56"
  4. Invalid characters should be ignored. So if I typed in 564adsd299 474 it should format it to "5642 9947 4"

The input should also respect traditional behaviour of the textbox. (The | here resembles the cursor e.g.

If I typed in 8 when the input is:

  1. 1234 5|67 it should turn to 1234 58|67
  2. 1234|, it should turn to 1234 8
  3. 1234| 567 it should turn to 1234 8567
  4. 1234| 5679 it should turn to 1234 8567 9

If I delete the previous character when the input is:

  1. 1234 5|67 it should turn to 1234 |67
  2. 1234 |567 it should turn to 1234| 567
  3. 1234| 567 it should turn to 123|5 67

More test cases is likely to follow.

Example

Basically it should behave exactly like the "Enter card details" used in Google Play Store. To find this page: Open Play Store on an Android device > Click Account > Payment methods > Add credit or debit card. This screen can also be found here:

What I have so far?

This is what I have so far:

var txtCardNumber = document.querySelector("#txtCardNumber");
txtCardNumber.addEventListener("input", onChangeTxtCardNumber);

function onChangeTxtCardNumber(e) {		
    var cardNumber = txtCardNumber.value;
 
	  // Do not allow users to write invalid characters
    var formattedCardNumber = cardNumber.replace(/[^\d]/g, "");
    formattedCardNumber = formattedCardNumber.substring(0, 16);
  
    // Split the card number is groups of 4
    var cardNumberSections = formattedCardNumber.match(/\d{1,4}/g);
    if (cardNumberSections !== null) {
        formattedCardNumber = cardNumberSections.join(' ');	
    }
	
    console.log("'"+ cardNumber + "' to '" + formattedCardNumber + "'");
  
    // If the formmattedCardNumber is different to what is shown, change the value
    if (cardNumber !== formattedCardNumber) {
        txtCardNumber.value = formattedCardNumber;
    }
}
<input id="txtCardNumber"/>

I want to create an input using JavaScript that automatically formats it in the correct Credit Card format.

What I Want?

  1. The input should format input in groups of 4. e.g. If I typed in 1234567890123456, it should format it to 1234 5678 9012 3456
  2. The max length should be 16 digits. So if I typed in 1234567890123456789 it should format it to "1234 5678 9012 3456"
  3. formatting should occur as you type. So if I typed "123456" it should format it to "1234 56"
  4. Invalid characters should be ignored. So if I typed in 564adsd299 474 it should format it to "5642 9947 4"

The input should also respect traditional behaviour of the textbox. (The | here resembles the cursor e.g.

If I typed in 8 when the input is:

  1. 1234 5|67 it should turn to 1234 58|67
  2. 1234|, it should turn to 1234 8
  3. 1234| 567 it should turn to 1234 8567
  4. 1234| 5679 it should turn to 1234 8567 9

If I delete the previous character when the input is:

  1. 1234 5|67 it should turn to 1234 |67
  2. 1234 |567 it should turn to 1234| 567
  3. 1234| 567 it should turn to 123|5 67

More test cases is likely to follow.

Example

Basically it should behave exactly like the "Enter card details" used in Google Play Store. To find this page: Open Play Store on an Android device > Click Account > Payment methods > Add credit or debit card. This screen can also be found here: https://play.google./store/account

What I have so far?

This is what I have so far:

var txtCardNumber = document.querySelector("#txtCardNumber");
txtCardNumber.addEventListener("input", onChangeTxtCardNumber);

function onChangeTxtCardNumber(e) {		
    var cardNumber = txtCardNumber.value;
 
	  // Do not allow users to write invalid characters
    var formattedCardNumber = cardNumber.replace(/[^\d]/g, "");
    formattedCardNumber = formattedCardNumber.substring(0, 16);
  
    // Split the card number is groups of 4
    var cardNumberSections = formattedCardNumber.match(/\d{1,4}/g);
    if (cardNumberSections !== null) {
        formattedCardNumber = cardNumberSections.join(' ');	
    }
	
    console.log("'"+ cardNumber + "' to '" + formattedCardNumber + "'");
  
    // If the formmattedCardNumber is different to what is shown, change the value
    if (cardNumber !== formattedCardNumber) {
        txtCardNumber.value = formattedCardNumber;
    }
}
<input id="txtCardNumber"/>

The above formats the credit number perfectly, but the issues begin when I want to edit.

However, the above does not satisfy test cases 5 onward, as the cursor just jumps to the end.

How can I achieve this behaviour. I know it's possible as Google has done it already.

(Please no use PayPal answers)

Edit: Note that I am looking for native JavaScript solutions, however feel free to suggest plugins as ments. The exception is libraries with little to no dependencies so it's possible to just copy the source code.

I've also removed jQuery on the above code to encourage native JS solutions.

Share Improve this question edited Jul 26, 2017 at 16:17 Yahya Uddin asked Jul 25, 2017 at 19:40 Yahya UddinYahya Uddin 29k40 gold badges157 silver badges247 bronze badges 0
Add a ment  | 

2 Answers 2

Reset to default 4

I see you're using jQuery, rather than try to solve this logic yourself you could consider using a masked input plugin. I chose this one simply because it came up first in a search. There are customization options and it appears to satisfy all your requirements.

$('#txtCardNumber').mask("9999 9999 9999 9999");
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js"></script>
<input id="txtCardNumber"/>

This should work:

var format = [9, 2, 3,5,5,5,5,5,5,5,4, 5, 5, 5, 54, 4, 4, 4, 4, 4, 4, 4, 
  4, 4].map((data, index) => {

  if ((index + 1) % 4 == 0) {
    data = data + " "
  }

  return data
})

format= format.join("")
console.log("format", format)
发布评论

评论列表(0)

  1. 暂无评论