credit-card-gaps-pattern

Creates a pattern for restricted-input from data obtained from credit-card-type

Why ?

Masks on hot for HTMLInputElement

Install

$ npm install credit-card-gaps-pattern 

Note: This project is compatible with node v8+

Usage

// Dependencies
import creditCardGapsPattern from 'credit-card-gaps-pattern';
 
const gaps = [4, 10];
const lengths = [14, 16, 19];
 
console.log(creditCardGapsPattern(gaps, lengths));
// => {{9999}} {{999999}} {{999999999}}

Example

// Dependencies
import RestrictedInput from 'restricted-input';
import creditCardType from 'credit-card-type';
import creditCardGapsPattern from 'credit-card-gaps-pattern';
 
const input = document.querySelector('input');
const {gaps, lengths} = creditCardType('30');
 
new RestrictedInput({
  element: input,
  pattern: creditCardGapsPattern(gaps, lengths)
});

Demo

Related

• restricted-input - Allow restricted character sets in input elements.
• credit-card-type - A library for determining credit card type