cleave.js - more examples

cleave.js - more examples

HTML

<script src="https://nosir.github.io/cleave.js/dist/cleave.min.js"></script>
<script src="https://nosir.github.io/cleave.js/dist/cleave-phone.i18n.js"></script>
<div>
    <section>
        <p>クレジットカード(<span class="type">クレカの種類を自動認識</span>): </p>
        <input class="input-0" placeholder="ex) 4***" />
    </section>
    
    <section>
        <p> "."で区切る年月日</p>
        <input class="input-3" placeholder="ex) 1876.02.13" />
    </section>
    
    <section>
        <p> "1.234.567,89"みたいな感じで右寄せ</p>
        <input class="input-4 right" placeholder="ex) 1.234.567,89" />
    </section>
    
    <section>
        <p>「￥」をプレフィクスに右寄せ</p>
        <input class="input-1 right" placeholder="ex) 500円" />
    </section>
    
    <section>
        <p>「-」や「.」など任意の文字で区切る</p>
        <input class="input-5" placeholder="ex) 12-34.56" />
    </section>
    
    <section>
        <p>複数機能を組み合わせる:</p>
        <input class="input-6" />
    </section>
    
    <section>
        <p>付加価値税登録番号</p>
        <input class="input-2" />
    </section>
    
    <section>
        <p>変更可能なプレフィクス</p>
        <input value="deleteme" class="input-7" />
    </section>
</div>

CSS

input {
    width: 80%;
    display: block;
    outline: none;
    -webkit-appearance: none;
    border: 1px solid #e6e6e6;
    border-radius: 5px;
    background-color: #fff;
    line-height: 30px;
    vertical-align: middle;
    height: 33px;
    font-size: 14px;
    padding: 0 8px;
}

.input-numeral {
    text-align: right;
}

.right {
    text-align: right;
}

body {
    font-family: sans-serif;
}

p {
    margin: 0;
    padding: 0 0 5px 0;
    font-size: 14px;
    color: #666;
}

section {
    margin-bottom: 10px;
    width: 50%;
    float: left;
}

JavaScript

new Cleave('.input-0', {
    creditCard: true,
    onCreditCardTypeChanged: function (type) {
        document.querySelector('.type').innerHTML = type;
    }
});

new Cleave('.input-3', {
    date: true,
    datePattern: ['Y', 'm', 'd'],
    delimiter: '.'
});

new Cleave('.input-4', {
    numeral: true,
    numeralDecimalMark: ',',
    delimiter: '.'
});

new Cleave('.input-1', {
    numeral: true,
    prefix: '￥'
});

new Cleave('.input-5', {
	uppercase: true,
    delimiters: ['.', '.', '-'],
    blocks: [3, 3, 3, 2]
});

new Cleave('.input-6', {
	uppercase: true,
    delimiter: ' ',
    prefix: '+81',
    blocks: [3, 9] // or [9]
});

new Cleave('.input-2', {
    numericOnly: true,
    delimiter: '.',
    prefix: 'BE',
    blocks: [5, 3, 3]
});

new Cleave('.input-7', {
	uppercase: true,
    delimiter: '-',
    blocks: [6, 2, 3, 3]
});