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

us1975mcAsked:
Who is Participating?
 
Carlos VillegasConnect With a Mentor Full 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
 
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
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
us1975mcAuthor Commented:
yv989c,

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

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

Thanks!
0
 
Carlos VillegasFull Stack .NET DeveloperCommented:
You're welcome
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.