Hi friends,in this article I will explain about How to allow numbers, backspace, delete,
left and right arrow and Tab Keys to the TextBox using Javascript or JQuery in
ASP.NET
I already explained previous articles about Handling multiple submit buttons on the same View in MVC , WebGrid with inline editing, updating, cancel and delete the record using JSON AJAX in MVC and How to bind the Checkboxlist from the database
I already explained previous articles about Handling multiple submit buttons on the same View in MVC , WebGrid with inline editing, updating, cancel and delete the record using JSON AJAX in MVC and How to bind the Checkboxlist from the database
For more details on various Keyboard key and ASCII code please
visit Keyboard Keys and Key Code Values
ASP.NET:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Numeric
Validation:How to allow numbers, backspace, delete, left and right arrow
and Tab keys to the
TextBox using Javascript or JQuery in ASP.NET</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>
|
The output of the above code as shown in the below figure.When you enter except numbers, backspace, delete, left and right arrow and Tab Keys then it shows "Please enter 0-9 digits only and not accepting the any other keys except numbers, backspace, delete, left and right arrow and Tab Keys.
You can download the code by clicking on the below Download button.
No comments:
Post a Comment