Input Mask Using Libraries
INTRO
Input mask help user in entering correct input. With mask the input is more readable and the user experience get improve. Suppose you open a form to enter credit card information, if there is not input formatting, you will have to check if you have entered 16 digits or not and with input formating, it will be more visible to see if you have entered 16 digits.
Without formating:
1234123412341234
With formatting: (More clear)
1234 1234 1234 1234
Using Intl-tel-Input Library
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.18/css/intlTelInput.css" integrity="sha512-gxWow8Mo6q6pLa1XH/CcH8JyiSDEtiwJV78E+D+QP0EVasFs8wKXq16G8CLD4CJ2SnonHr4Lm/yY2fSI2+cbmw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<style>
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: monospace;
flex-direction: column;
}
.form-label {
display: block;
padding-bottom: 5px;
margin-top: 15px;
}
.form-control {
border-radius: 10px;
border: 1px solid #aaa;
padding: 15px;
}
.form-group {
display: flex;
flex-direction: column;
}
.iti__flag {
background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.18/img/flags.png");
}
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.iti__flag {
background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.18/img/flags@2x.png");
}
}
.hide {
display: none;
}
.validtion_msg {
font-size: 0.7rem;
padding-left: 15px;
}
.valid_msg {
color: darkgreen;
}
.invalid_msg {
color: red;
}
</style>
</head>
<body>
<div class="form-group">
<label for="phone-number" class="form-label">Phone</label>
<input type="tel" class="form-control phone-number">
<span id="phone-valid-msg" class="hide validtion_msg valid_msg">✓ Valid</span>
<span id="phone-error-msg" class="hide validtion_msg invalid_msg"></span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.18/js/intlTelInput.min.js" integrity="sha512-hpJ6J4jGqnovQ5g1J39VtNq1/UPsaFjjR6tuCVVkKtFIx8Uy4GeixgIxHPSG72lRUYx1xg/Em+dsqxvKNwyrSg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
var input = document.querySelector(".phone-number");
let errorMsg = document.querySelector("#phone-error-msg");
let validMsg = document.querySelector("#phone-valid-msg");
let errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];
let iti = window.intlTelInput(input, {
preferredCountries: ['qa', 'pk'],
utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.18/js/utils.min.js"
});
var reset = function() {
input.classList.remove("error");
errorMsg.innerHTML = "";
errorMsg.classList.add("hide");
validMsg.classList.add("hide");
};
input.addEventListener('blur', function() {
var classf = document.querySelector(".iti__selected-flag > div").getAttribute("class");
var flag = classf.slice(-2);
console.log("check classf: ", classf);
console.log("check flag: ", flag);
var formattedNumber = intlTelInputUtils.formatNumber(input.value, flag, intlTelInputUtils.numberFormat.INTERNATIONAL);
input.value = formattedNumber;
reset();
console.log(input.value);
console.log(iti.getNumber());
if (input.value.trim()) {
if (iti.isValidNumber()) {
validMsg.classList.remove("hide");
} else {
input.classList.add("error");
var errorCode = iti.getValidationError();
console.log(errorCode);
errorMsg.innerHTML = errorMap[errorCode];
errorMsg.classList.remove("hide");
}
}
});
// on keyup / change flag: reset
input.addEventListener('change', reset);
input.addEventListener('keyup', reset);
</script>
</body>
</html>
See the Pen Input Mask Using Intl-tel-input by Muhammad Habib (@mhabib555) on CodePen.
Using Inputmask
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: monospace;
flex-direction: column;
}
.form-label {
display: block;
padding-bottom: 5px;
margin-top: 15px;
}
.form-control {
border-radius: 10px;
border: 1px solid #aaa;
padding: 15px;
}
.form-group {}
</style>
</head>
<body>
<div class="form-group">
<label for="credit-card" class="form-label">Credit Card</label>
<input type="text" class="form-control credit-card">
</div>
<div class="form-group">
<label for="phone-number" class="form-label">Phone</label>
<input type="text" class="form-control phone-number">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.8-beta.17/inputmask.min.js" integrity="sha512-og7aY6herKA6I4hCGv2CmfV/ykThnh0hy34fq4qAme23iex6gmemMU4glCmgQL/iFx5Dj7H/nVusA6DMBi6YRA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
let creditCardInput = document.querySelector(".credit-card");
Inputmask({
"mask": "9999 9999 9999 9999"
}).mask(creditCardInput);
let phoneNumberInput = document.querySelector(".phone-number");
Inputmask({
"mask": "(99) 999 9999999"
}).mask(phoneNumberInput);
creditCardInput.addEventListener('change', () => {
});
</script>
</body>
</html>
See the Pen Untitled by Muhammad Habib (@mhabib555) on CodePen.
Comments
Post a Comment