Formatter.js Example

Formatter.js Example. Credit card, phone number, plate number http://firstopinion.github.io/formatter.js

HTML

<script src="http://firstopinion.github.io/formatter.js/javascripts/formatter.js"></script>
<label>Credit card number:</label>
<input type="text" class="input" id="credit-input" maxlength="19" pattern="\d*">

<label>Local phone number:</label>
<input type="text" class="input" id="phone-input" maxlength="19" pattern="\d*">
    
<label>International phone number:</label>
<input type="text" class="input" id="phone2-input" maxlength="19" pattern="\d*">
    
<label>EU plate number:</label>
<input type="text" class="input" id="plate-input" maxlength="19" pattern="\d*">

CSS

input {
    font-size: 1.1em;
    font-family: "Lucida Console", Monaco, monospace;
    padding: 8px;
    width: 400px;
    background: #F9F9F9;
    border: solid 1px #c4c7cb;
    border-radius: 3px;
    box-shadow: inset 0px 1px 1px #e0e4e9;
    outline: none;
    color: #777;
}

label {
    font-family: "Helvetica", "Arial";
    display: block;
    margin-top: 20px;
}

CoffeeScript

# formatter.js examples (http://firstopinion.github.io/formatter.js)

# credit card number
card = document.getElementById "credit-input"
new Formatter card,
    pattern: "{{9999}}-{{9999}}-{{9999}}-{{9999}}"
    persistent: true
    
# phone number
phone = document.getElementById "phone-input"
new Formatter phone,
    pattern: "({{999}}) {{999}}.{{9999}}"
    persistent: true
    
# phone number
phone2 = document.getElementById "phone2-input"
new Formatter phone2,
    pattern: "+{{99}} {{999}} {{99}} {{99}} {{99}}"
    persistent: true
    
# plate number
plate = document.getElementById "plate-input"
new Formatter plate,
    pattern: "{{aa}}-{{99999}}"
    persistent: true