Link to home
Start Free TrialLog in
Avatar of RadhaKrishnaKiJaya
RadhaKrishnaKiJaya

asked on

Masked edit textbox control in ASP.NET

Hi Experts,

I have a textbox to enter phone number in 111-111-1111 format. I do not want to type dash (-) all the time. I want the cursor to go to the next field when I type 111. I am using ASP.NET and VB.NET.

Thanks.
Avatar of Russ Suter
Russ Suter

you should be able to do something like this using jQuery. Example:

$('#fieldName').keyup(function (e) {
            if (e.keyCode != 16) {
                if (e.keyCode != 9) {
                    if ($.trim($('#fieldName').val()).length == "5") {
                        $('#nextField').focus();
                    }
                }
            }
        });

Open in new window

Avatar of RadhaKrishnaKiJaya

ASKER

Thank you for your reply.

I could not understand how the above code will be helpful to me.

Thanks.
Here's a complete example. Paste this into an html page and it'll work.

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('.phonepart').keyup(function (e) {
            if (e.keyCode != 16) {
                if (e.keyCode != 9) {
                    if ($.trim($(e.target).val()).length === e.target.maxLength) {
                        e.preventDefault();
                        var inputs = $(this).closest('form').find(':input:visible');
                        inputs.eq( inputs.index(this)+ 1 ).focus();
                    }
                }
            }
        });
    });
</script>
</head>
<body>
  <form id="phonenumber">
    <input class="phonepart" id="areacode" style="width: 40px;" maxlength="3"/> -
    <input class="phonepart" id="phoneprefix" style="width: 40px;" maxlength="3"/> -
    <input class="phonepart" id="phonesuffix" style="width: 60px;" maxlength="4"/>
  </form>
</body>
</html>

Open in new window

Thank you very much for the code. But I do not want three different text boxes. I want the same operation in one text box with two dashes. If you try to create an yahoo A/C, in the registration form they have a field to enter the phone number. Where the brackets appear automatically when you start entering the numbers. If you can help me to do something like that then it will be really great.
ASKER CERTIFIED SOLUTION
Avatar of Russ Suter
Russ Suter

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thank you very much for your help.