通过键盘上下键 JS事件，控制候选词的选择项
效果图
JS代码
//上下键 选择事件 searchBackgroud 为样式，只做标记，无实质样式，因为和其他样式不兼容，只能添加CSS
$(document).keydown(function (event) {
var upDownClickNum = $("#SearchTips .searchBackgroud ").length;
if ($("#SearchTips").css("display") == "block") {
alert(event.keyCode)
//38:上 40:下
if (event.keyCode == 38) {
if (upDownClickNum < 1) {
$("#SearchTips li:last a").css({ "background": "#f0f0f0" }).addClass("searchBackgroud");
} else {
$("#SearchTips .searchBackgroud ").removeClass("searchBackgroud").css({ "background": "" }).parent().prev().children().addClass("searchBackgroud").css({ "background": "#f0f0f0" });
} stopDefault(event);//不阻止光标户向前移动
} else if (event.keyCode == 40) {
if (upDownClickNum < 1) {
$("#SearchTips li:first a").css({ "background": "#f0f0f0" }).addClass("searchBackgroud");
} else {
$("#SearchTips .searchBackgroud").removeClass("searchBackgroud").css({ "background": "" }).parent().next().children().addClass("searchBackgroud").css({ "background": "#f0f0f0" }); }
stopDefault(event);
}
upDownClickNum++; } }); //阻止事件执行
function stopDefault(e) { //阻止默认浏览器动作(W3C)
if (e && e.preventDefault) {
//火狐的 事件是传进来的e
e.preventDefault();
}
//IE中阻止函数器默认动作的方式
else {
//ie 用的是默认的event
event.returnValue = false;
}
}
html代码
<html>
<head></head>
<body>
<ol id="SearchTips" class="search_list" style="display: none;">
<li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=1&c=138&rs=凤凰北新村1区" onclick="ga('send', 'pageview', '1');">鼓楼 凤凰北新村<span><b>1</b> </span>区 西江滨 待售(1) </a> </li>
<li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=1&c=122&rs=凤凰北新村1区" onclick="ga('send', 'pageview', '1');">鼓楼 凤凰北新村<span><b>1</b> </span>区 万宝商圈 待售(1) </a> </li>
<li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=5&c=129&rs=怡美嘉园1期" onclick="ga('send', 'pageview', '1');">仓山 怡美嘉园<span><b>1</b> </span>期[怡美嘉园] 仓山步行街 待售(3)</a></li>
<li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=5&c=146&rs=怡美嘉园1期" onclick="ga('send', 'pageview', '1');">仓山 怡美嘉园<span><b>1</b> </span>期[怡美嘉园] 三叉街 待售(3) </a></li>
<li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=3&c=127&rs=福兴花园1期" onclick="ga('send', 'pageview', '1');">晋安 福兴花园<span><b>1</b> </span>期 鼓山新东区 待售(7)</a> </li>
<li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=3&c=141&rs=福兴花园1期" onclick="ga('send', 'pageview', '1');">晋安 福兴花园<span><b>1</b> </span>期 福马路 待售(7)</a></li>
<li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=7&rs=融汇山水1期" onclick="ga('send', 'pageview', '1');">闽侯 融汇山水<span><b>1</b> </span>期 待售(32)</a></li>
<li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=5&rs=振兴花园1期">仓山 振兴花园<span><b>1</b> </span>期 </a></li>
<li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=3&c=155&rs=彩虹铺景" onclick="ga('send', 'pageview', '1');">晋安 彩虹铺景[隆盛小区 <span><b>1</b> </span>#楼] 五四路（温泉公园） 待售(6)</a></li>
<li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=3&c=142&rs=彩虹铺景" onclick="ga('send', 'pageview', '1');">晋安 彩虹铺景[隆盛小区 <span><b>1</b> </span>#楼] 火车站 待售(6) </a></li>
</ol>
</body>
</html>
通过键盘上下键 JS事件，控制候选词的选择项的更多相关文章
- 使用jsonp跨域调用百度js实现搜索框智能提示，并实现鼠标和键盘对弹出框里候选词的操作【附源码】
项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择.使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript ...
- Js获取下拉框当前选择项的文本和值
现在有一个Id为AreaId的下拉框,要获取它当前选择项的文本和值有以下方法: <span class="red">* </span> 地 区: ...
- WPF中使用后台代码来控制TreeView的选择项（SelectedItem）以及展开节点操作
首先为TreeView控件制作一个Style: <Style x:Key="LibraryTreeViewItemStyle" TargetType="{x:Typ ...
- js浏览器键盘事件控制(转自新浪微博)
js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...
- KeyboardJS 开发指南 - 与 Three.js 配合使用的捕捉键盘组合键库
KeyboardJS 开发指南 - 与 Three.js 配合使用的捕捉键盘组合键库 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非 ...
- JS检查当图片不存在时显示默认图片和键盘大小写键状态
当图片不存在时显示默认图片 <script type="text/javascript"> var imgs = document.images; for(var i ...
- js 事件大全
Js事件大全一般事件 事件 浏览器支持 描述onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick IE4|N4|O 鼠标双击事件onMouseDo ...
- JS事件
JS事件: 声明:为了事件对象event跨浏览器兼容: var oEvent==ev||event; 所以在下面用到 event 的地方都用 oEvent 代替 1)doucument的 ...
随机推荐
- padding和margin的用法
在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 一.padding 1.语法结 ...
- Android 框架学习1：EventBus 3.0 的特点与如何使用
前面总结了几篇基础,在这过程中看着别人分享自定义 View.架构或者源码分析,看起来比我写的"高大上"多了,内心也有点小波动. 但是自己的水平自己清楚,基础不扎实画再多源码流程图也 ...
- [qt][问题记录] 无法定位程序输入点 _ZdaPvj 于动态链接库 libstdc++-6.dll
无法定位程序输入点 _ZdaPvj 于动态链接库 libstdc++-6.dll 该问题是没有打包库的问题,之所以出现这个问题的是直接用系统自带的命令行使用qt的windeployqt命令导致提供的库 ...
- Storm开发过程中的问题与建议
转自:http://blog.csdn.net/ouyang111222/article/details/50061305 (一) topology层级建议设不要设置过多 storm讲究是流式计算,s ...
- 动态可缓存的内容管理系统(CMS)
摘要:内容管理系统(CMS)在各大商业站点和门户站点中扮演着重要的角色,是内容有效组织和快速发布极为重要的基础平台.目前主流的内容发布系统都使用静态页面进行内容发布,在我们的实际使用过程中我们深切的感 ...
- java.lang.NoClassDefFoundError: org/apache/commons/io/output/DeferredFileOutputStream异常解决方法
使用Tomcat部署Servlet程序时,单步调试跟踪到: List<FileItem> itemList = sfu.parseRequest(request); 总是会报错:Java. ...
- mysql时间运算
DELETE FROM zhongqiu WHERE caretatime<=ADDDATE(NOW(),-14) caretatime` timestamp NOT NULL DEFAULT ...
- 双击 cui
//改变属性块的双击事件 //将菜单文件中的双击改一下,退出时还原文件 acad.bak.cui 改这个名字 每次用这个更新为新的 acad.cui进行修改 //退出时再用 acad.bak.cui还 ...
- windows下安装storm1.1.0并启动
64位windows安装storm前需要先搞定zookeeper和python,所以下面我们3步走: 一.zookeeper 1.上https://zookeeper.apache.org/点击下方d ...
- [三卷天书]ajax请求时接收到乱码的处理方案
$.ajax({ url: "getmore.ashx", type: "post", dataType: "text", data: { ...