通过键盘上下键 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的 ...
随机推荐
- SpringCloud教程 | 第十三篇: 断路器聚合监控(Hystrix Turbine)
版权声明:本文为博主原创文章,欢迎转载,转载请注明作者.原文超链接 ,博主地址:http://blog.csdn.net/forezp. http://blog.csdn.net/forezp/art ...
- Leetcode 912. Sort an Array
class Solution: def sortArray(self, nums: List[int]) -> List[int]: return sorted(nums)
- 启动mysql 失败，“Warning:The /usr/local/mysql/data directory is not owned by the 'mysql' or '_mysql' ”
一.Mac OS X的升级或其他原因可能会导致MySQL启动或开机自动运行时 在MySQL操作面板上会提示“Warning:The /usr/local/mysql/data directory is ...
- java如何获取当前时间，精确到毫秒
import java.text.SimpleDateFormat; import java.util.Date; import java.util.Calendar; //func1 Calenda ...
- Java实现三种常用的查找算法(顺序查查找，折半查找，二叉排序树查找)
public class Search { public class BiTreeNode{ int m_nValue; BiTreeNode m_pLeft; BiTreeNode m_pRight ...
- 在Mac中安装python，配置python环境
参考链接:http://blog.justbilt.com/2014/07/02/setup_python_on_mac/ 其实跟windows差不多,就是在python官网下载特定版本的python ...
- Android 杂记
Android Studio 报错:sdk location should not contain whitespace as this can cause problems with the ndk ...
- 【Swift 】- 闭包
闭包是自包含带函数代码块,可以在代码中被传递和使用.我觉得可以这样理解:闭包相当于C#中的lambda表达式: 全局函数和嵌套函数,实际也是特殊的闭包. 通常闭包是以下三种形式: a,全局函数是一个有 ...
- 为什么新生代内存需要有两个Survivor区？
对于常见的GC算法,我们都应该知道,例如:标记清除算法.复制算法.标记整理算法等.标记清除算法由于回收之后存在大量的内存碎片,存在效率和空间问题!为了解决效率问题,引出了复制算法!熟悉GC算法的小伙伴 ...
- redis的安装和类型及基本命令
一.memcached和redis区别 1. redis 可以存储,memcached用来缓存, 2. 数据类型,memcached只有string:redis有string,链表,哈希结构,集合,有 ...