How to Mask first 6 digits as X when entering Aadhar Card No using jqu

Paul Rajs

6y4.6k

Hi Developers ,

I have to Keep the div value without change first 6 digits as XXXXXX

Also need to edit if the user enter wrong Aadhar card number as well.

In the below code after release cursor or press tab action below

Textbox value : 8693-3764-2252

after enter tab = XXXX-XX64-2252

if i edit the text box value means the dvCCN value has been updated as same as XXXX-XX64-2252 ..

but it should be give the value without change first 6 digits as XXXXXX

This is my requirement ... if anyone know the solution kinldy suggest me

Am using the below Code

Jquery:

Html

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Navaneeth Krishnan6y ago
good one. finally u got the result.

try using jQuery mask plugin which reduces the coding lines if need

https://igorescobar.github.io/jQuery-Mask-Plugin/
0
Paul Rajs6y ago
Dear All,

I have found the solution for my requirement ..

If anyone wants simple use the below code ... this will work exactly ...

Javascript :
"text/javascript" > function showCardValue() {
    document.getElementById("cardNo").value = document.getElementById("cardNoSafe").value;
}

function hideCardValue(val) {
    document.getElementById("cardNoSafe").value = val;
    var len = val.length;
    if (len > 1) {
        const regex = /\d(?=\d{6})/g;
        const substr = "x";
        document.getElementById("cardNo").value = val.replace(regex, substr);
        var cardNo = document.getElementById('cardNo').value;
        var cardNoSafe = document.getElementById('cardNoSafe').value;
        $('#dvCCN').html(cardNo);
        $('#dvRe').html(cardNoSafe);
        console.log(cardNo);
        console.log(cardNoSafe);
    }
} < /script>
Html code :
< div > Aadhar Number:
< input name = "AccountNo"
id = "cardNo"
placeholder = "Card Number"
title = "Card Number"
class = "form-control"
onfocus = "showCardValue()"
onblur = "hideCardValue(this.value)"
maxlength = "12"
autocomplete = "off"
type = "text" / >
< input name = "cardNoSafe"
id = "cardNoSafe"
value = ""
style = "display:none;" >
< br / > < br / > With Mask:
< div id = "dvCCN" > < /div> Without Mask: < div id = "dvRe" > < /div>
Thanking you alll , Especially Dharmendr ...

'man becomes what he thinks about'
+1