I’m creating an input for a credit card, I need to separate it into 4 groups of 4 digits,
the problem is that I need to mask the second and third group as a password.
example ( 0 0 0 0 – * * * * – * * * * – 0 0 0 0).
Would it be possible to make this mask in just one input? I only managed to make an input for each group but it was very strange.
Detail I can only use Jquery 1.3.2
>Solution :
This is a possible solution using vanilla js. In this solution the original input is masked by span which will contain the formatted credit card number.
Code
document.querySelector(".credit-card>input").addEventListener("input", (event) => {
document.querySelector(".credit-card>span").textContent = mask(event.target.value);
});
function mask(text) {
let masked = "";
for (let i = 0; i < text.length; i++) {
if (i % 4 === 0 && i !== 0) masked += "-"
if (i > 3 && i < 12) {
masked += "*";
} else {
masked += text[i];
}
}
return masked;
}.credit-card {
position: relative;
height: 2rem;
width: 150px;
}
.credit-card > input {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border: 1px solid gray;
outline: none;
color: #fff;
}
input:focus {
border: 1px solid red;
}
.credit-card > span {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 3;
user-select: none;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
}<div class="credit-card">
<input type="text" maxlength="16"/>
<span></span>
</div>