[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 875
  • Last Modified:

Textboxes Auto Tab and Shift-Tab

Experts,

I have 7 textboxes that can only have one character in the textbox.  The characters are A-Z, or 0-9, or a dash (-), or a space ( ), or an apostrophe (‘).  Once a valid character has been entered into the textbox I need for the focus to move to the next textbox. If the user wishes to move to the previous textbox they should be able to use the Shift + Tab keys. When the Shift + Tab keys are used they should highlight the character in the textbox.  

I have two different sets of javascript that I have tried. The first one allows the use of the Shift + Tab keys to move back which is good but it doesn’t automatically go to the next field when the space, dash or apostrophe is pressed.  It also allows any character to be pressed, not just the A-Z, or 0-9, or a dash (-), or a space ( ), or an apostrophe (‘).

The second script allows for the dash (-), or a space ( ), or an apostrophe (‘) to go to the next field but it also allows any character and the user cannot use the Space + Tab keys to go back to the previous textbox’s.

Is there any way of doing this through javascript or do I need to look at a different solution? (VB.net in code behind or whatever.)

Thanks!
 
<script type="text/javascript">
            $(document).ready(function () {
                $('#<%= Let1.ClientID %>').keyup(function (event) {
                    var c = String.fromCharCode(event.keyCode);
                    var isWordcharacter = c.match(/\w/);

                    if (isWordcharacter) {
                        $('#<%= Let2.ClientID %>').focus();
                        $('#<%= Let2.ClientID %>').select();
                    }

                });
                $('#<%= Let2.ClientID %>').keyup(function (event) {
                    var c = String.fromCharCode(event.keyCode);
                    var isWordcharacter = c.match(/\w/);

                    if (isWordcharacter) {
                        $('#<%= Let3.ClientID %>').focus();
                        $('#<%= Let3.ClientID %>').select();
                    }
                });
                $('#<%= Let3.ClientID %>').keyup(function (event) {
                    var c = String.fromCharCode(event.keyCode);
                    var isWordcharacter = c.match(/\w/);

                    if (isWordcharacter) {
                        $('#<%= Let4.ClientID %>').focus();
                        $('#<%= Let4.ClientID %>').select();
                    }
                });
                $('#<%= Let4.ClientID %>').keyup(function (event) {
                    var c = String.fromCharCode(event.keyCode);
                    var isWordcharacter = c.match(/\w/);

                    if (isWordcharacter) {
                        $('#<%= Let5.ClientID %>').focus();
                        $('#<%= Let5.ClientID %>').select();
                    }
                });
                $('#<%= Let5.ClientID %>').keyup(function (event) {
                    var c = String.fromCharCode(event.keyCode);
                    var isWordcharacter = c.match(/\w/);

                    if (isWordcharacter) {
                        $('#<%= Let6.ClientID %>').focus();
                        $('#<%= Let6.ClientID %>').select();
                    }
                });
                $('#<%= Let6.ClientID %>').keyup(function (event) {
                    var c = String.fromCharCode(event.keyCode);
                    var isWordcharacter = c.match(/\w/);

                    if (isWordcharacter) {
                        $('#<%= Let7.ClientID %>').focus();
                        $('#<%= Let7.ClientID %>').select();
                    }
                });
                $('#<%= Let7.ClientID %>').keyup(function (event) {
                    var c = String.fromCharCode(event.keyCode);
                    var isWordcharacter = c.match(/\w/);

                    if (isWordcharacter) {
                        $('#<%= btnView.ClientID %>').focus();
                    }
                });
            });
    </script>

Open in new window

<script type="text/javascript">
        $(document).ready(function () {
            $('#<%= Let1.ClientID %>').keyup(function (event) {
                var c = String.fromCharCode(event.keyCode);
                var d = String.fromCharCode(189);
                var s = String.fromCharCode(32);
                var a = String.fromCharCode(222);
                var isWordcharacter = c.match(/[A-Z\d]/);
                if ((d = c) || (s = c) || (a = c) || (isWordcharacter)) {
                    $('#<%= Let2.ClientID %>').focus();
                    $('#<%= Let2.ClientID %>').select();
                }
            });
            $('#<%= Let2.ClientID %>').keyup(function (event) {
                var c = String.fromCharCode(event.keyCode);
                var d = String.fromCharCode(189);
                var s = String.fromCharCode(32);
                var a = String.fromCharCode(222);
                var isWordcharacter = c.match(/[A-Z\d]/);
                if ((d = c) || (s = c) || (a = c) || (isWordcharacter)) {
                    $('#<%= Let3.ClientID %>').focus();
                    $('#<%= Let3.ClientID %>').select();
                }
            });
            $('#<%= Let3.ClientID %>').keyup(function (event) {
                var c = String.fromCharCode(event.keyCode);
                var d = String.fromCharCode(189);
                var s = String.fromCharCode(32);
                var a = String.fromCharCode(222);
                var isWordcharacter = c.match(/[A-Z\d]/);
                if ((d = c) || (s = c) || (a = c) || (isWordcharacter)) {
                    $('#<%= Let4.ClientID %>').focus();
                    $('#<%= Let4.ClientID %>').select();
                }
            });
            $('#<%= Let4.ClientID %>').keyup(function (event) {
                var c = String.fromCharCode(event.keyCode);
                var d = String.fromCharCode(189);
                var s = String.fromCharCode(32);
                var a = String.fromCharCode(222);
                var isWordcharacter = c.match(/[A-Z\d]/);
                if ((d = c) || (s = c) || (a = c) || (isWordcharacter)) {
                    $('#<%= Let5.ClientID %>').focus();
                    $('#<%= Let5.ClientID %>').select();
                }
            });
            $('#<%= Let5.ClientID %>').keyup(function (event) {
                var c = String.fromCharCode(event.keyCode);
                var d = String.fromCharCode(189);
                var s = String.fromCharCode(32);
                var a = String.fromCharCode(222);
                var isWordcharacter = c.match(/[A-Z\d]/);
                if ((d = c) || (s = c) || (a = c) || (isWordcharacter)) {
                    $('#<%= Let6.ClientID %>').focus();
                    $('#<%= Let6.ClientID %>').select();
                }
            });
            $('#<%= Let6.ClientID %>').keyup(function (event) {
                var c = String.fromCharCode(event.keyCode);
                var d = String.fromCharCode(189);
                var s = String.fromCharCode(32);
                var a = String.fromCharCode(222);
                var isWordcharacter = c.match(/[A-Z\d]/);
                if ((d = c) || (s = c) || (a = c) || (isWordcharacter)) {
                    $('#<%= Let7.ClientID %>').focus();
                    $('#<%= Let7.ClientID %>').select();
                }
            });
            $('#<%= Let7.ClientID %>').keyup(function (event) {
                var c = String.fromCharCode(event.keyCode);
                var isWordcharacter = c.match(/\w/);

                if (isWordcharacter) {
                    $('#<%= btnView.ClientID %>').focus();
                }
            });
        });
    </script>

Open in new window

0
us1975mc
Asked:
us1975mc
  • 3
  • 2
1 Solution
 
strickddCommented:
Implementing this in your code would take quite a bit of effort, but this page will help you considerably: http://lobotomy.smallinfinity.net/blog/2008/04/05/javascript-from-dummy-autotab/
0
 
Carlos VillegasFull Stack .NET DeveloperCommented:
Hello, based on your example I made this, I think this is what you need, give it a try:
<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function focusNextControl(controlId, nextControlId) {
            if (event.keyCode == 9 || event.keyCode == 16)
                return;

            var control = document.getElementById(controlId);
            if (control != null && !control.value.match("[A-Z]|[0-9]|\-|\x20|\'$"))
                control.value = "";
            else if (nextControlId != null) {
                var nextControl = document.getElementById(nextControlId);
                nextControl.focus();
                nextControl.select();
            }
        }

        $(document).ready(function () {
            $('#<%= Let1.ClientID %>').keyup(function (event) {
                focusNextControl('<%= Let1.ClientID %>', '<%= Let2.ClientID %>');
            });
            $('#<%= Let2.ClientID %>').keyup(function (event) {
                focusNextControl('<%= Let2.ClientID %>', '<%= Let3.ClientID %>');
            });
            $('#<%= Let3.ClientID %>').keyup(function (event) {
                focusNextControl('<%= Let3.ClientID %>', '<%= Let4.ClientID %>');
            });
            $('#<%= Let4.ClientID %>').keyup(function (event) {
                focusNextControl('<%= Let4.ClientID %>', '<%= Let5.ClientID %>');
            });
            $('#<%= Let5.ClientID %>').keyup(function (event) {
                focusNextControl('<%= Let5.ClientID %>', '<%= Let6.ClientID %>');
            });
            $('#<%= Let6.ClientID %>').keyup(function (event) {
                focusNextControl('<%= Let6.ClientID %>', '<%= Let7.ClientID %>');
            });
            $('#<%= Let7.ClientID %>').keyup(function (event) {
                focusNextControl('<%= Let7.ClientID %>', '<%= MyButton.ClientID %>');
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server" autocomplete="off">
    <div>
        <asp:TextBox ID="Let1" runat="server" MaxLength="1" Columns="1" />
        <asp:TextBox ID="Let2" runat="server" MaxLength="1" Columns="1" />
        <asp:TextBox ID="Let3" runat="server" MaxLength="1" Columns="1" />
        <asp:TextBox ID="Let4" runat="server" MaxLength="1" Columns="1" />
        <asp:TextBox ID="Let5" runat="server" MaxLength="1" Columns="1" />
        <asp:TextBox ID="Let6" runat="server" MaxLength="1" Columns="1" />
        <asp:TextBox ID="Let7" runat="server" MaxLength="1" Columns="1" />
        <br />
        <asp:Button Text="Test" runat="server" ID="MyButton" />
    </div>
    </form>
</body>
</html>

Open in new window

You can download the aspx file from this link:
 Test6.aspx
0
 
us1975mcAuthor Commented:
yv989c,

I can enter 0-9 and -,  , ' but it will not allow me to enter A-Z.  

Any Ideas?
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
Carlos VillegasFull Stack .NET DeveloperCommented:
Hello, A-Z only in UPPER case, to allow lower case change the line #17 to this:
if (control != null && !control.value.match("[A-Za-z]|[0-9]|\-|\x20|\'$"))

Open in new window

0
 
us1975mcAuthor Commented:
That was what the Doctor Called for.

Thanks!
0
 
Carlos VillegasFull Stack .NET DeveloperCommented:
You're welcome
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now