user1392897 user1392897 -4 years ago 278
jQuery Question

Javascript Input Text Masking without Plugin

I want to mask the text in an input box without changing the actual value. I can not use any plugins.

I am currently doing this - but as you can see the issue is that the actual value is changed on submit. How can I just change the display value?

var number = this.value.replace(/(\d{2})(\d{3})(\d{2})/,"$1-$2-$3");
this.value = number;

Answer Source

You need two inputs

Two inputs should get the job done. One input will contain the masked text and the other will be a hidden input that contains the real data.

<input type="text" name="masknumber">
<input type="text" name="number" style="display:none;">

The way I approached the masking is to build a function for both masking and unmasking the content so everything stays uniform.

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

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

function destroyMask(string){
    return string.replace(/\D/g,'').substring(0,8);

Working JSFiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download