Input Masks

Your Phone

Postal Code

Credit Card Number

CVV/CVD

Expiration (mm/yy)

References:

HTML

<div class="form_item">
	<span class="pre_input">Your Phone</span>
	<label>
		<input type="tel" name="phone" class="input || phone_us" inputmode="numeric">
	</label>
</div>
						
<div class="form_item">
	<span class="pre_input">Your Phone</span>
	<label>
		<input type="tel" name="phone" class="input || phone_mask" inputmode="numeric">
	</label>
</div>
						
<div class="form_item">
	<span class="pre_input">Postal Code</span>
	<label>
		<input type="text" name="postal" class="input || postal_mask">
	</label>
</div>
						
<div class="form_item">
	<span class="pre_input">Credit Card Number</span>
	<label>
		<input type="text" name="card_number" class="input || card_number" inputmode="numeric">
	</label>
</div>
						
<div class="form_item">
	<span class="pre_input">CVV/CVD</span>
	<label>
		<input type="text" name="card_cvv" class="input || cvv" inputmode="numeric">
	</label>
</div>
						
<div class="form_item">
	<span class="pre_input">Expiration (mm/yy)</span>
	<label>
		<input type="text" name="card_expiry" class="input || expiry" inputmode="numeric">
	</label>
</div>

JavaScript

$('.phone_us').mask('000.000.0000');
$('.phone_mask').inputmask('999-999-9999');
$('.postal_mask').inputmask('A9A 9A9');
$('.expiry').inputmask('99/99');

function cardCID() {
	$('.card_number').inputmask('9999 999999 99999');
	$('.cvv').inputmask('9999');
}

function cardCVV() {
	$('.card_number').inputmask('9999 9999 9999 9999');
	$('.cvv').inputmask('999');
}

cardCVV();

$('.card_number').keyup(function(){
	if ($(this).val().substring(0, 1) == 3) {
		cardCID();
	} else {
		cardCVV();
	}
});