<input type="text" class="search" placeholder="请输入搜索信息" style="width:300px; height:35px; margin-top:10px; line-height:35px" />
<div style="width:300px; height:200px; border:1px solid red; margin:0 auto">
<ul class="searchUL">
<li>
11111111111111111
</li>
<li>
22222222222222222
</li>
<li>
33333333333333333
</li>
<li>
44444444444444444
</li>
<li>
55555555555555555
</li>
</ul>
</div>
<h2 class="reslut" style="color:red">
</h2>
</div>
$(".search").focus(function () {
$(".reslut").html("移入光标");
getKey();
});
$(".search").blur(function () {
$(".reslut").html("移出光标");
});
});
function getKey() {
document.onkeydown = function (event) {
var e = event || window.event || arguments.callee.caller.arguments[0];
//if (e && e.keyCode == 27) { // 按 Esc
// //要做的事情
// alert(1111);
//}
//if (e && e.keyCode == 113) { // 按 F2
// //要做的事情
//}
//if (e && e.keyCode == 13) { // enter 键
// //要做的事情
//}
//if (e && e.keyCode == 116) { // f5 键
// //要做的事情
// return false;
//}
$(".reslut").html("你按下的键是:" + e.key + ",键码是:" + e.keyCode);
var index = $(".add2").index();
console.log("索引" + index);
var count = $(".searchUL li").length - 1;
if (e && e.keyCode == 38) { //ArrowUp 键 向上
//要做的事情
$(".searchUL li").removeClass("add2");
index--;
if (index < 0) {
index = count;
}
$(".searchUL li").eq(index).addClass("add2");
console.log("索引向上" + index);
return false;
}
if (e && e.keyCode == 40) { // ArrowDown 键 向下
//要做的事情
$(".searchUL li").removeClass("add2");
index++;
if (index > count) {
index = 0;
}
$(".searchUL li").eq(index).addClass("add2");
console.log("索引向下" + index);
return false;
}
if (e && e.keyCode == 13) { // enter 键
var a = $(".add2").html();
console.log(a);
$(".search").val(a);
return false;
}
}
}