demos.html

---
layout: master
---

{% raw %}

<h1>Demos</h1>

<h2 id="credit">Credit Card</h2>
<p><strong>Ex</strong>: 4242-4242-4242-4242</p>
<div class="demo-input">
  <div class="input-wrap input-s1 input-white">
    <input type="text" class="input" id="credit-input" maxlength="19" pattern="\d*">
  </div>
</div>
<pre><code>new Formatter(document.getElementById('credit-input'), {
  'pattern': '{{9999}}-{{9999}}-{{9999}}-{{9999}}'
});</code></pre>
<pre><code>$('#credit-input').formatter({
  'pattern': '{{9999}}-{{9999}}-{{9999}}-{{9999}}'
});</code></pre>

<h2 id="phone">Phone Number</h2>
<p><strong>Ex</strong>: (802) 415-3411</p>
<div class="demo-input">
  <div class="input-wrap input-s1 input-white">
    <input type="text" class="input" id="phone-input" maxlength="14" pattern="\d*">
  </div>
</div>
<pre><code>new Formatter(document.getElementById('phone-input'), {
  'pattern': '({{999}}) {{999}}.{{9999}}',
  'persistent': true
});</code></pre>
<pre><code>$('#phone-input').formatter({
  'pattern': '({{999}}) {{999}}-{{9999}}',
  'persistent': true
});</code></pre>

{% endraw %}