us1975mc
asked on
Focus on Textboxes Auto Tab and Shift-Tab (continued)
Experts,
I received code the other day from one of the Expert’s and I am trying to add a little more to that code.
I have seven textboxes that can only hold one character each. When a character is added in the textbox, focus should be set to the next textbox. If the user uses Shift-Tab it should get focus of the previous textbox.
What I need to add to the code is I only want the characters A-Z, 0-9, a dash (-), an apostrophe (‘) and a space ( ). One of the experts stated that this could be done using regex and that I needed to create a new question.
Well here it is… any ideas?
I received code the other day from one of the Expert’s and I am trying to add a little more to that code.
I have seven textboxes that can only hold one character each. When a character is added in the textbox, focus should be set to the next textbox. If the user uses Shift-Tab it should get focus of the previous textbox.
What I need to add to the code is I only want the characters A-Z, 0-9, a dash (-), an apostrophe (‘) and a space ( ). One of the experts stated that this could be done using regex and that I needed to create a new question.
Well here it is… any ideas?
<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>
Oops, forgot the numbers:
var isWordcharacter = c.match(/[A-Za-z\d '-]/);
var isWordcharacter = c.match(/[A-Za-z\d '-]/);
And if you don't want lower case:
var isWordcharacter = c.match(/[A-Z\d '-]/);
var isWordcharacter = c.match(/[A-Z\d '-]/);
ASKER
TerryAtOpus,
Below is my code. Very straight forward, I thought, but I still cannot get it to work.
I can put a !, @, #, $, % ,^ ,& l,*, (, ), _ ,+ ,= and several other characters in the text box.
Any Ideas what I am doing wrong?
Totally confused in Missouri...
Below is my code. Very straight forward, I thought, but I still cannot get it to work.
I can put a !, @, #, $, % ,^ ,& l,*, (, ), _ ,+ ,= and several other characters in the text box.
Any Ideas what I am doing wrong?
Totally confused in Missouri...
Demo.aspx
------------------------------------------------------------------
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Demo.aspx.vb" Inherits="Demo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#<%= Let1.ClientID %>').keyup(function (event) {
var c = String.fromCharCode(event.keyCode);
var isWordcharacter = c.match(/[A-Z\d '-]/);
if (isWordcharacter) {
$('#<%= Let2.ClientID %>').focus();
$('#<%= Let2.ClientID %>').select();
}
});
$('#<%= Let2.ClientID %>').keyup(function (event) {
var c = String.fromCharCode(event.keyCode);
var isWordcharacter = c.match(/[A-Z\d '-]/);
if (isWordcharacter) {
$('#<%= Let3.ClientID %>').focus();
$('#<%= Let3.ClientID %>').select();
}
});
$('#<%= Let3.ClientID %>').keyup(function (event) {
var c = String.fromCharCode(event.keyCode);
var isWordcharacter = c.match(/[A-Z\d '-]/);
if (isWordcharacter) {
$('#<%= Let4.ClientID %>').focus();
$('#<%= Let4.ClientID %>').select();
}
});
$('#<%= Let4.ClientID %>').keyup(function (event) {
var c = String.fromCharCode(event.keyCode);
var isWordcharacter = c.match(/[A-Z\d '-]/);
if (isWordcharacter) {
$('#<%= Let5.ClientID %>').focus();
$('#<%= Let5.ClientID %>').select();
}
});
$('#<%= Let5.ClientID %>').keyup(function (event) {
var c = String.fromCharCode(event.keyCode);
var isWordcharacter = c.match(/[A-Z\d '-]/);
if (isWordcharacter) {
$('#<%= Let6.ClientID %>').focus();
$('#<%= Let6.ClientID %>').select();
}
});
$('#<%= Let6.ClientID %>').keyup(function (event) {
var c = String.fromCharCode(event.keyCode);
var isWordcharacter = c.match(/[A-Z\d '-]/);
if (isWordcharacter) {
$('#<%= Let7.ClientID %>').focus();
$('#<%= Let7.ClientID %>').select();
}
});
$('#<%= Let7.ClientID %>').keyup(function (event) {
var c = String.fromCharCode(event.keyCode);
var isWordcharacter = c.match(/[A-Z\d '-]/);
if (isWordcharacter) {
$('#<%= btnView.ClientID %>').focus();
}
});
});
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="Let1" runat="server"></asp:TextBox>
<br />
<asp:TextBox ID="Let2" runat="server"></asp:TextBox>
<br />
<asp:TextBox ID="Let3" runat="server"></asp:TextBox>
<br />
<asp:TextBox ID="Let4" runat="server"></asp:TextBox>
<br />
<asp:TextBox ID="Let5" runat="server"></asp:TextBox>
<br />
<asp:TextBox ID="Let6" runat="server"></asp:TextBox>
<br />
<asp:TextBox ID="Let7" runat="server"></asp:TextBox>
<br />
<asp:Button ID="btnView" runat="server" Text="View" />
<br />
<br />
<asp:Label ID="Lab1" runat="server" Text=""></asp:Label>
</div>
</form>
</body>
</html>
Demo.aspx.vb
------------------------------------------------------------------
Partial Class Demo
Inherits System.Web.UI.Page
Protected Sub btnView_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnView.Click
Lab1.Text = Let1.Text & Let2.Text & Let3.Text & Let4.Text & Let5.Text & Let6.Text & Let7.Text
End Sub
End Class
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I think doing a plain comparison on the ASCII value of the character would be easier as the allowed input is quite limited.
http://jalaj.net/2007/03/08/asc-and-chr-in-javascript/
http://jalaj.net/2007/03/08/asc-and-chr-in-javascript/
ASKER
It took awhile but it is working.
Thanks!
Thanks!
var isWordcharacter = c.match(/\w/);
to:
var isWordcharacter = c.match(/[A-Za-z '-]/);
Note I've used an apostrophe, not a backtick as you put in your round brackets (`) - you can change it if you need to.