Credit card input

Vanilla JS credit card form with multiple fields.

DEMO

You can also see the demo on the Codepen

Features

• Automatically focuses the next field
• Only accepts numbers
• Holds the main input
• Copy to clipboard

How to use

Include the style file:

<link rel="stylesheet" href="./css/credit-card-input.css">

Include the js file:

<script src="./js/credit-card-input.js"></script>

Use this HTML structure to initial credit inputs:

<div class="credit-card-inputs">
  <div class="credit-card-inputs__fields">
    <input type="text" data-pos="1" placeholder="xxxx" />
    <input type="text" data-pos="2" placeholder="xxxx" />
    <input type="text" data-pos="3" placeholder="xxxx" />
    <input type="text" data-pos="4" placeholder="xxxx" />
  </div>
  <button class="credit-card-inputs__reset">Reset</button>
</div>

If you want to use the copy to clipboard feature, include this file in your project:

<script src="./js/copy-to-clipboard.js"></script>

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/amiryxe/credit-card-input/css/credit-card-input.min.css">

<script src="https://cdn.jsdelivr.net/gh/amiryxe/credit-card-input/js/credit-card-input.min.js"></script>