mask-input
Version:
Mask input component. Allow to input formatted values with fixed length or apply custom formatting function, to format values with any length
73 lines (66 loc) • 2.01 kB
HTML
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id='example' class='app'>
<div>
<h1>Masked inputs for using without React</h1>
<a href='https://github.com/xnimorz/vanilla-masked-input'>
<span class='github'></span>Project on github</a>
<div class='gap'></div>
<div>
A vanilla component for creating formatted inputs. In case you don't use react. If you use react, try main project:
<a href="https://github.com/xnimorz/masked-input">https://github.com/xnimorz/masked-input</a>
</div>
<div class='gap'>
Input with invisible mask:
<input class='js-input' />
<div class='code'>
<code>
import PlainMaskInput from '../src/MaskInput';
const MaskInput = new PlainMaskInput(document.querySelector('.js-input'), {
mask: '0000-0000-0000-0000',
});
</code>
</div>
</div>
<div class='gap'>
Input with mask (Credit card):
<input class='js-input-mask' />
<div class='code'>
<code>
import PlainMaskInput from '../src/MaskInput';
const MaskInput = new PlainMaskInput(document.querySelector('.js-input-mask'), {
mask: '0000-0000-0000-0000',
alwaysShowMask: true,
maskChar='_'
});
</code>
</div>
</div>
Also, you can use this mask input to fill phone numbers, dates, birthdays, time etc. This project support all params that
support main project:
<a href="https://xnimorz.github.io/masked-input/">https://xnimorz.github.io/masked-input/</a>
<h2>
Tested:
</h2>
<ul>
<li>IOS Safari 11</li>
<li>Google Chrome</li>
<li>Safari</li>
<li>Mozilla Firefox</li>
</ul>
<h2>
Not Tested:
</h2>
<ul>
<li>IE, EDGE, Mobile IE</li>
<li>Android Browser</li>
<li>Mobile Chrome</li>
</ul>
</div>
</div>
<script src='bundle.js'></script>
</body>
</html>