Monday, May 20, 2024
Homepage · jquery
 Popular · Latest · Hot · Upcoming
62
rated 0 times [  68] [ 6]  / answers: 1 / hits: 73790  / 8 Years ago, wed, november 9, 2016, 12:00:00

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?



$(input[name='number']).focusout(function(){

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

    this.value = number;

}

More From » jquery
 Answers
20

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(){

        $(input[name='number']).val(destroyMask(this.value));

    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


[#60118] Tuesday, November 8, 2016, 8 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
alejandro
Add To Favorites
Follow
Total Points: 231
Total Questions: 102
Total Answers: 107
Location: Jordan
Member since Wed, Jun 17, 2020
4 Years ago
alejandro questions
Mon, Jul 18, 22, 00:00, 2 Years ago
Fri, Sep 18, 20, 00:00, 4 Years ago
Thu, Sep 10, 20, 00:00, 4 Years ago
Sun, Aug 9, 20, 00:00, 4 Years ago
Thu, May 21, 20, 00:00, 4 Years ago
View All
;