How to allow numbers, backspace, delete, left and right arrow and Tab Keys to the TextBox using Javascript or JQuery in ASP.NET

Category > ASP.NET || Published on : Tuesday, February 9, 2016 || Views: 10215 || How to allow numbers backspace delete left and right arrow and Tab Keys to the TextBox using Javascript or JQuery in ASP.NET


Introduction

Here Pawan Kumar will explain How to allow numbers, backspace, delete, left and right arrow and Tab Keys to the TextBox using Javascript or JQuery in ASP.NET

Description

In previous post I have explained Check UnCheck All CheckBoxes in Asp.Net GridView using jQuery, Asp.Net Serialization & Deserialization with C#.Net, jQuery to Dynamically Change or Set Placeholder Text in Asp.Net TextBox, jQuery to Validate File Type and Size before Uploading through Asp.Net FileUpload Control, How to clear the file upload control value using jQuery / JavaScript, Export GridView selected rows to Excel or word in ASP.NET using CSharp, and many more articles.

Now I will explain How to How to allow numbers, backspace, delete, left and right arrow and Tab Keys to the TextBox using Javascript or JQuery in ASP.NET

So follow the steps to learn How to allow numbers, backspace, delete, left and right arrow and Tab Keys to the TextBox using Javascript or JQuery in ASP.NET

Step 1: Create a new website

Step 3:  Add a new webpage in create website

Step 4: Write the following codes:-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Numeric Validation</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" language="javascript">
        //using Javascript
        function checkJS(event) {
            var key = window.event ? event.keyCode : event.which;
            if (event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 46 || event.keyCode == 37 || event.keyCode == 39) {
                document.getElementById("<%=lblError.ClientID %>").innerHTML = "";
                return true;
            }
            else if (key < 48 || key > 57) {
                document.getElementById("<%=lblError.ClientID %>").innerHTML = "Please enter 0-9 digits only";
                return false;
            }
            else {
                document.getElementById("<%=lblError.ClientID %>").innerHTML = "";
                return true;
            }
    }
    //using JQuery
    var specialKeys = new Array();
    specialKeys.push(8); //Backspace
    specialKeys.push(9); //Tab
    specialKeys.push(37); //Left Arrow
    specialKeys.push(39); //Right Arrow
    $(function () {
        $("#txtJQuery").bind("keypress", function (event) {
            var key = window.event ? event.keyCode : event.which;
            var keyCode = event.which ? event.which : event.keyCode;
            if (specialKeys.indexOf(keyCode) != -1 || event.keyCode == 46) {
                $("#lblShowError").text("");
                return true;
            }
            else if (key < 48 || key > 57) {
                $("#lblShowError").text("Please enter 0-9 digits only");
                return false;
            }
            else {
                $("#lblShowError").text("");
                return true;
            }
        });
    });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table>
                <tr>
                    <td>Validation using Javascript
                    </td>
                    <td>:
                    </td>
                    <td>
                        <asp:TextBox ID="txtJavascript" runat="server" onKeyPress="return checkJS(event)"></asp:TextBox>
                        <asp:Label ID="lblError" runat="server" ForeColor="Red"></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td>Validation using JQuery
                    </td>
                    <td>:
                    </td>
                    <td>
                        <asp:TextBox ID="txtJQuery" runat="server"></asp:TextBox>
                        <asp:Label ID="lblShowError" runat="server" ForeColor="Red"></asp:Label>
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

 

Conclusion:

So, In this tutorial we have learned, How to allow numbers, backspace, delete, left and right arrow and Tab Keys to the TextBox using Javascript or JQuery in ASP.NET

Download Source Codes