Post
Ask Question

Create an alpha-numeric textbox using jQuery

Introduction: In this article we will discuss how to create and use an alpha-numeric textbox using jQuery. As we know, an alpha-numeric textbox means a textbox which only allows you to enter alphabetical and numerical value but it does not allow you to enter any special characters, something like @,#,$,%,& and others. Whenever we enter the value in the textbox, if we are entering only alphanumeric characters then they will enter, if we are trying to type some special character inside the textbox, then a message box will open and will give a message that you are entering a non alpha numeric value inside the textbox and will replace it with an empty string.  We have add a feature of focusing the cursor always on the text box through which we are not necessary to click on textbox we can directly write inside the textbox. In this article we will explore it to see that feature then you will have to follow the steps given below. Let see the steps given below:

Step 1: Firstly we have to create a Web Application

  • Go to Visual Studio 2010
  • Create the Web Application
  • Click OK.

Web Application

Step 2: Secondly you have to add a new page to the website

  • Go to the Solution Explorer.
  • Right Click o Project name.
  • Select add new item.
  • Add new web page and give it a name.
  • Click OK.

Select new item

Add new web page

Step 3: In this step we have to see that from where you have to add the reference of the script let see the figure given below:

Show jQuery script

Step 4: Now we have to write the script code reference to the source file of the default2.aspx page and this script you can add anywhere inside the <head></head> section or can the <body></body> section and the script code will be writen inside the <script></script> tag:

Script code

Step 5: Now we have to write the jQuery code to explore the feature of alpha-numeric text box and focus on the textbox which is given below:

rr4.jpg

Code Description: Here we will discuss about the code given above, the code shown above matches a regular expression /[^a-zA-Z0-9 ]/g that finds all characters that are not alphabets or numbers. Further If the user enters a character that is not an alphabet or number, the character is immediately replaced with an empty string. Here we are binding some events named as keyup and blur event with bind method which is as bind('keyup blur', function ().The first one is the keyup in which the blur event detects characters when the textbox looses focus whereas the keyup event detects characters after the character has been entered. I have observed people using only the keypress event to handle this requirement, but remember that in IE, keypress does not behave as expected for non-character keys.

Step 6: In this step we will write the complete code for the program

Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head id="Head1" runat="server">
 <title>Demo on Alphanumeric Characters in a TextBox</title>
 <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
 <script type="text/javascript">
    $(document).ready(function () {
        $("input:text:disabled").css("background-color", "gray");
        $("input:text:enabled:first").focus();
        $('input[id$=txtbx]').bind('keyup blur', function () {
            if (this.value.match(/[^a-zA-Z0-9 ]/g)) {
                this.value = this.value.replace(/[^a-zA-Z0-9 ]/g, '');
                alert("You are entering the non alpha numeric value");
            }
        });
        $('input[id$=txtbx1]').bind('keyup blur', function () {
            if (this.value.match(/[^a-zA-Z0-9 ]/g)) {
                this.value = this.value.replace(/[^a-zA-Z0-9 ]/g, '');
                alert("You can not enter the non alpha numeric value in the password textbox");
            }
        });
    });
 </script>
 </head>
<body>
<form id="form1" runat="server">
 <div class="bigDiv">
 <h2 style="font-family: 'Comic Sans MS'; color: #0000FF">Demo! Please Enter Alphanumeric Characters in a TextBox</h2>
        <asp:Label ID="Label1" runat="server" Text="Enter Non Aplha Numeric Value"
        Font-Names="Comic Sans MS" Font-Size="Large" ForeColor="#990000"></asp:Label>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:TextBox ID="txtbx" runat="server"
        Text="" ToolTip=" Please Enetr Non alphanumeric value in the Textbox" BackColor="#FFFF99"
        BorderColor="#993333" BorderStyle="Groove" BorderWidth="5px" Height="55px"
        Width="237px" Font-Names="Comic Sans MS" Font-Size="Large" />
        <br /><br />
        <asp:Label ID="Label2" runat="server" Text="Enter the password with Non Aplha Numeric"
        Font-Names="Comic Sans MS" Font-Size="Large" ForeColor="#990000"></asp:Label>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:TextBox ID="txtbx1" runat="server"
        Text="" ToolTip="Please Enter Non alphanumeric value in the Textbox" BackColor="#FFFF99"
        BorderColor="#993333" BorderStyle="Groove" BorderWidth="5px" Height="55px"
        Width="237px" Font-Names="Comic Sans MS" Font-Size="Large" />
 </div>
</form>
</body>
</html>

Step 7: In this step we wills see the design page which is given below, let see the figure:

Design Application

Step 8: In this step we are going to run the application by pressing F5.

Output1:

Output1

Output2:

output 2

Output3:

output 3


Similar Articles