Category >
ASP.NET
|| Published on :
Tuesday, February 9, 2016 || Views:
11387
||
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