[jQuery] How to use keypress on div element with jquery
Hi guys,
i am new on jquery. i am trying to do some practices. i' want to do an
ajax autocompleter. First i have to solve some client side script
issues. Below, there is a page that includes div elements. i want to
work them like a dropdownlist. You can navigate between rows by
pressing down and up keys. Anyway,what i did it is working with ie7,
but it does not work with firefox. Does anybody know why?
Thanks for any response.
Here is the code;
<html>
<title></title>
<style type="text/css">
.main
{
border:1px solid #000;
width:200px;
position:absolute;
/*top:200px;
left:200px;*/
}
.selected
{
background:#ccc;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function focusIt() {
$("#main").focus();
}
function main_onkeydown(e) {
if (this && !this.disabled) {
var e = e ? e : window.event;
if (e == null) return;
kCode = e.keyCode || e.which;
}
switch (kCode) {
case 40:
moveDown(this);
break;
case 38:
moveUp(this);
break;
case 13:
hideMain();
break;
default:
alert(kCode);
}
}
function hideMain() {
$("#main").fadeOut(500);
}
function moveDown(objWnd) {
var $selected = $("#main .selected");
if ($selected.length == 0) {
$("#main > div").filter(function(index) {
return index == 0;
}).attr("class", "selected");
return;
}
$selected.attr("class", "");
var $nextRow = $selected.next()
$nextRow.attr("class", "selected");
}
function moveUp(objWnd) {
var $selected = $("#main .selected");
if ($selected.length == 0) {
$("#main > div").filter(":last-child").attr("class",
"selected");
return;
}
$selected.attr("class", "");
var $nextRow = $selected.prev()
$nextRow.attr("class", "selected");
}
$(document).ready(function() {
//Here is the part that i use for event binding.
//it does not work even you try with keypress
//i think something worng with div elements key capture
events.
//Anyway if somebody solve this issue, i will owe him/her.
$("#main").bind("keydown", function(e) { main_onkeydown
(e); });
});
</script>
</head>
<body onload='focusIt()'>
<form id="form1" runat="server">
<div>
<div id="main" class="main" >
<div id="row1">Row1</div>
<div id="row2">Row2</div>
<div id="row3">Row3</div>
<div id="row4">Row4</div>
<div id="row5">Row5</div>
<div id="row6">Row6</div>
</div>
</div>
</form>
</body>
</html>
Thank you