Description:
In this example we explain that how to increase or decrease
the value of the list based on arrow key press event using JavaScript or jQuery
in asp.net.
I have faced live issue like I have requirement like I have
one textbox with two arrow button up and down inside the textbox has a numeric
value. Now what I want is to keep increasing that numeric value of textbox
while I am pressing and holding any of arrow keys. If I press up arrow key then
value must be increased by 1 and when I pressed down arrow key the value must
decreased by 1. Also I have requirement like user cannot directly input value
in textbox he/she do only by using up and down arrow key.
Dynamically Bind Data in Ajax Accordion Panel Bind Data to Accordion from databse
Restrict the size of File when Uploaded How to Restrict the size of File when uploaded by user
Restrict the size of File when Uploaded How to Restrict the size of File when uploaded by user
Finally I got the solution here we define the code for
increase/decrease value based on arrow key using JavaScript and jQuery in
asp.net as follows:
Code.aspx:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="textnoincrement.aspx.cs" Inherits="textnoincrement" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>How to increase number when I
press arrow key on keyboard with javascript or JQuery. </title>
<style type="text/css">
div {
position: relative;
width: 50px;
}
input {
width: 50px;
height: 20px;
}
.img {
position: absolute;
right: 5px;
top: 5px;
}
.img1 {
position: absolute;
right: 5px;
top: 15px;
}
</style>
<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
function showKeyCode(e, val) {
if (e.keyCode == 38)
document.getElementById("t1").value = parseInt(val, 10) +
1;
else if (e.keyCode == 40) {
if (document.getElementById("t1").value != 1)
document.getElementById("t1").value = parseInt(val, 10) -
1;
}
else
return false;
}
$(document).ready(function () {
$("#up").click(function () {
$("#incdec input").val(parseInt($("#incdec input").val()) + 1);
});
$("#down").click(function () {
if (t1.value != 1)
$("#incdec input").val(parseInt($("#incdec input").val()) - 1);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<h3>Increase or Decrease Value
when pressed on arrow key</h3>
<div id="incdec">
<input type="text" id="t1" value="1" onkeydown="return
showKeyCode(event,this.value)" />
<img src="Images/up.png" width="15" height="10" id="up" class="img" />
<img src="Images/down.png" width="15" height="10" id="down" class="img1" />
</div>
</form>
</body>
</html>
0 comments:
Post a Comment