How to apply masking in a textbox

Question

I have a grid in which there is a textbox that is currently accepting numeric numbers. However I want to apply masking in that textbox using javascript or jquery without any plugin. I have searched and everywhere they are asking for plug-in.

I tried this solution but it does not work my default value should be 00000-00-000

 $("input[name='masknumber']").on("keyup change", function(){
  
  this.value = createMask($("input[name='masknumber']").val());
})

function createMask(string){
return string.replace(/(\d{2})(\d{3})(\d{2})/,"$1-$2-$3");
 }

Any help would be appreciated.

Does this answer your question? Javascript Input Text Masking without Plugin — KENZO
– KENZO, Commented Dec 18, 2020 at 8:38
@Adhitya no it does not answer my question. My textbox value should show by default this format 00000-00-000 and user can only enter in this format. — Unknown
– Unknown, Commented Dec 18, 2020 at 12:47

Dhairya · Accepted Answer · 2020-12-18 07:36:05Z

0

Add a hidden input which will store original value without masking.

Html:

<input type="text" value="0000000000" id="masknumber">
<input type="text" id="numberWithoutMask" style="display:none;" value="0000000000">

JS:

// call function on change
$("#maskNumber").on("keyup change", function () {
    updateValue();
})
// function to update the value with masking
function updateValue() {
    $("#numberWithoutMask").val(destroyMask($("#maskNumber").val()));
    $("#maskNumber").val(createMask($("#numberWithoutMask").val()))
}

function createMask(string) {
    return string.replace(/(\d{5})(\d{2})(\d{3})/, "$1-$2-$3");
}

function destroyMask(string) {
    return string.replace(/\D/g, '').substring(0, 10);
}
updateValue(); // call function to update the default value

If you're loading default value, load value to both the inputs.

answered Dec 18, 2020 at 7:36

Dhairya

335 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

KENZO Over a year ago

It's same function like this: https://stackoverflow.com/questions/40513950/javascript-input-text-masking-without-plugin

Dhairya Over a year ago

What's your requirements??

KENZO Over a year ago

Because this is a duplicate post.

Dhairya Over a year ago

I checked that post when you commented. Btw my code is very different from that. And for masking input values, this is the only way without using any plugin.

Collectives™ on Stack Overflow

How to apply masking in a textbox

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related