How to format mask textbox in jQuery?

Question

0.00/5 (No votes)

See more:

I have a web form that has textboxes on it that are masked using jQuery code.

Here is my code:

ASP.NET

<head runat="server">
    <title>jQuery Masked Input Demo</title>
    <script src="Jquery Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="Jquery Scripts/jquery.maskedinput.js" type="text/javascript"></script>
    <script type='text/javascript'>
    $(document).ready(function () {
        
            $.mask.definitions['~'] = "[+-]";
            $("#TextBox1").mask("999,999,999,999");
            $("#TextBoxY").mask("999,999,999,999");
 
            $("#TextBox1").blur(function () {
                $("#lblinfo").html(" " + $(this).mask());
            $("#TextBoxY").blur(function() {
             $("#lblinfo2").html(" " + $(this).mask());
        }).dblclick(function() {
            $(this).unmask();
 

        });
    });
});

How can I get the code to mask any number that the user enters without is having to be 12 numbers?

Example:

If user has 12 numbers they will enter 123,456,789,101 and the masking will work.
If a user has 7 numbers 1,234,567 the masking should work but it doesn't. How can I get the jQuery to mask any number?

Posted 30-Sep-14 4:40am

Computer Wiz99

Updated 4-Sep-20 19:55pm

Add a Solution

Comments

Sergey Alexandrovich Kryukov 30-Sep-14 11:07am

Did you mean "12 digits"?
—SA

Computer Wiz99 30-Sep-14 11:14am

Yes.

3 solutions

Solution 3

$('[data-type="adhaar-number"]').keyup(function() {
var value = $(this).val();
value = value.replace(/\D/g, "").split(/(?:([\d]{4}))/g).filter(s => s.length > 0).join("-");
$(this).val(value);
});

$('[data-type="adhaar-number"]').on("change, blur", function() {
var value = $(this).val();
var maxLength = $(this).attr("maxLength");
if (value.length != maxLength) {
$(this).addClass("highlight-error");
} else {
$(this).removeClass("highlight-error");
}
});

.highlight-error {
border-color: red;
}

Posted 4-Sep-20 19:55pm

Member 14931069

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Accepted Answer · 2014-09-30T05:13:00

Solution 1

I don't think the Plugin supports any number of character for marking.

But according to the Plugin site - MASKED INPUT PLUGIN[^]

Quote:
You can have part of your mask be optional. Anything listed after '?' within the mask is considered optional user input. The common example for this is phone number + optional extension.

JavaScript
jQuery(function($){
   $("#phone").mask("(999) 999-9999? x99999");
});

So, you can put a "?" mark after 7 characters, it would work.

Posted 30-Sep-14 5:13am

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Comments

Computer Wiz99 30-Sep-14 11:17am

Tadit Dash, So I will have to put a "?" after all characters like this:

<pre lang="HTML">
jQuery(function($){
$("#phone").mask("(9?9?9?) 9?9?9?-9?9?9?9? x9?9?9?9?9?");
});
</pre>

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 30-Sep-14 11:20am

Is it working?

Computer Wiz99 30-Sep-14 11:29am

I have this code to work but it starts off to the left and not the right.
How can I fix this?

$.mask.definitions['~'] = "[+-]";
$("#TextBox1").mask('?999,999,999,999');
$("#TextBoxY").mask('?999,999,999,999');

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 30-Sep-14 11:31am

Please go with Solution 2. That is much better.

Sergey Alexandrovich Kryukov 30-Sep-14 11:21am

This is no a solution, because OP needs to allow the user to stop input after any number of digits, not fixed number of them.

Please see Solution 2.

—SA

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 30-Sep-14 11:30am

Hey Sergey, the Plugin you are referring to is different what OP used. I answered taking that into account.

But the Plugin you suggested is what OP should use in my opinion. Good answer Sergey. :)

Sergey Alexandrovich Kryukov 30-Sep-14 11:46am

Thank you very much for this note. Then my advice would be using the plug-in I tried. :-)
—SA

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 1-Oct-14 1:41am

Welcome. :)

Sergey Alexandrovich Kryukov · Accepted Answer · 2014-09-30T05:20:00

Solution 2

In disbelieve, I just tried the jQuery .mask() plug-in: http://igorescobar.github.io/jQuery-Mask-Plugin[^].

It works with incomplete fill-in well enough. Also, on the same page, pay attention for the code sample under the title "On-the-fly mask change".

[EDIT]

Tadit noticed that this is a different plug-in, not the one you used. Then I would advice to use this plug-in. ;-)

—SA

Posted 30-Sep-14 5:20am

Sergey Alexandrovich Kryukov

Updated 30-Sep-14 5:48am

v4

Comments

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 30-Sep-14 11:30am

+5. :)

Sergey Alexandrovich Kryukov 30-Sep-14 11:48am

Thank you very much, Tadit.
—SA

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 1-Oct-14 1:41am

Welcome. :)