通过键盘上下键 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&amp;c=138&amp;rs=凤凰北新村1区" onclick="ga('send', 'pageview', '1');">鼓楼 凤凰北新村<span><b>1</b> </span>区 西江滨 待售(1) </a> </li> <li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=1&amp;c=122&amp;rs=凤凰北新村1区" onclick="ga('send', 'pageview', '1');">鼓楼 凤凰北新村<span><b>1</b> </span>区 万宝商圈 待售(1) </a> </li> <li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=5&amp;c=129&amp;rs=怡美嘉园1期" onclick="ga('send', 'pageview', '1');">仓山 怡美嘉园<span><b>1</b> </span>期[怡美嘉园] 仓山步行街 待售(3)</a></li> <li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=5&amp;c=146&amp;rs=怡美嘉园1期" onclick="ga('send', 'pageview', '1');">仓山 怡美嘉园<span><b>1</b> </span>期[怡美嘉园] 三叉街 待售(3) </a></li> <li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=3&amp;c=127&amp;rs=福兴花园1期" onclick="ga('send', 'pageview', '1');">晋安 福兴花园<span><b>1</b> </span>期 鼓山新东区 待售(7)</a> </li> <li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=3&amp;c=141&amp;rs=福兴花园1期" onclick="ga('send', 'pageview', '1');">晋安 福兴花园<span><b>1</b> </span>期 福马路 待售(7)</a></li><li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=7&amp;rs=融汇山水1期" onclick="ga('send', 'pageview', '1');">闽侯 融汇山水<span><b>1</b> </span>期 待售(32)</a></li> <li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=5&amp;rs=振兴花园1期">仓山 振兴花园<span><b>1</b> </span></a></li><li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=3&amp;c=155&amp;rs=彩虹铺景" onclick="ga('send', 'pageview', '1');">晋安 彩虹铺景[隆盛小区 <span><b>1</b> </span>#楼] 五四路(温泉公园) 待售(6)</a></li><li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=3&amp;c=142&amp;rs=彩虹铺景" onclick="ga('send', 'pageview', '1');">晋安 彩虹铺景[隆盛小区 <span><b>1</b> </span>#楼] 火车站 待售(6) </a></li></ol></body>
</html>

 

转载于:https://www.cnblogs.com/xiaoshi657/p/5445257.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/257273.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

物理竞赛得奖学计算机,物理竞赛林紫琪带你探索清华学堂计算机科学实验班”(姚班)...

林紫琪&#xff0c;34届全国中学生物理竞赛全国第22名&#xff0c;获得女生最高分&#xff0c;入选国家集训队&#xff0c;现就读于清华姚班。这是一条小科普&#xff1a;“清华学堂计算机科学实验班”(姚班)由世界著名计算机科学家姚期智院士于2005年创办&#xff0c;致力于培…

Jmeter===Jmeter中使用CSV Data Set Config参数化不重复数据执行N遍(转)

Jmeter中使用CSV Data Set Config参数化不重复数据执行N遍 要求&#xff1a; 今天要测试上千条数据&#xff0c;且每条数据要求执行多次&#xff0c;&#xff08;模拟多用户多次抽奖&#xff09; 1.用户id有175个&#xff0c;且没有任何排序规则&#xff1b; 2.要求175个用户都…

[转]wireshark 实用过滤表达式(针对ip、协议、端口、长度和内容) 实例介绍

首先说几个最常用的关键字&#xff0c;“eq” 和 “”等同&#xff0c;可以使用 “and” 表示并且&#xff0c;“or”表示或者。“!" 和 "not” 都表示取反。 一、针对wireshark最常用的自然是针对IP地址的过滤。其中有几种情况&#xff1a; &#xff08;1&#xff0…

[Flexbox] Using order to rearrange flexbox children

Using the order property we alter the order in which flexbox children appear on the page, without making changes to the dom. Desktop Mobile 转载于:https://www.cnblogs.com/Answer1215/p/5453671.html

计算机怎么更改用户头像像,Win10系统电脑账户头像怎么改成系统默认状态?

为了保护电脑的安全&#xff0c;我们可以设置登录账号密码&#xff0c;而账号的头像也是可以自行更换的。但是&#xff0c;某些时候&#xff0c;因为一些原因&#xff0c;我们需要将Win10系统账户的头像去掉&#xff0c;即改成默认状态。但是很多人都不清楚该怎么操作&#xff…

SPFA模板

今天去听2015ZJOI浙江省队第二试的集训&#xff0c;早上就是听得云里雾里的ORZ&#xff0c;下午某两集训队大神过来将题目&#xff0c;第一个进了IOI的我只听懂了10%ORZ&#xff0c;第二个人机交互很好玩&#xff0c;找个时间单独写下。 顺便附带膜拜各位聚聚&#xff0c;保我明…

LCM在Kernel中的代码分析

lcm的分析首先是mtkfb.c 1.mtk_init中platform_driver_register(&mtkfb_driver)注册平台驱动 panelmaster_init(); DBG_init(); mtkfb_ipo_init(); 2.mtkfb_probe进行普配 3.然后执行primary_display_init(mtkfb_find_lcm_driver(),lcd_fps); 4.mtkfb_find_lcm_driver()进行…

html ascii编码方式,HTML 字符集 参考手册

要正确显示一个 HTML 页面&#xff0c;浏览器必须知道要使用的字符集(字符编码)。HTML 字符集在 HTML 中&#xff0c;正确的字符编码是什么&#xff1f;HTML5 中默认的字符编码是 UTF-8。这并非总是如此。早期网络的字符编码是 ASCII 码。后来&#xff0c;从 HTML 2.0 到 HTML …

JavaScript 中的闭包和作用域链(读书笔记)

要想理解闭包&#xff0c;应当先理解JavaScript的作用域和作用域链。 JavaScript有一个特性被称之为“声明提前&#xff08;hoisting&#xff09;”&#xff0c;即JavaScript函数里声明的所有变量&#xff08;但不涉及赋值&#xff09;都被“提前”至函数体的顶部&#xff0c;“…

leetcode jump game ii

题目&#xff1a; Given an array of non-negative integers, you are initially positioned at the first index of the array. Each element in the array represents your maximum jump length at that position. Your goal is to reach the last index in the minimum numb…

韩师师范学院计算机科学与技术在哪个学区,2017年韩山师范学院本科插班生考试《数据结构》A卷...

韩山师范学院2017年本科插班生考试试卷计算机科学与技术 专业 数据结构 试卷(A 卷)一、单项选择题(每题2分&#xff0c;共30分)1. 对线性表&#xff0c;在下列哪种情况下应当采用链表表示&#xff1f;( ) A. 经常需要随机地存取元素 B. 经常需要进行插入和删除操作 C. 表中元素…

JAVA取随机数,石头剪刀布实例

一、取随机数&#xff1a; import java.util.Random; //导入随机数 public class Test{public static void main(String[] args){Random xx new Random(); //声明随机数int number xx.nextInt(10); //赋值随机数给numberSystem.out.println("随机数…

计算机网络犯罪和一般犯罪的不同,论计算机网络犯罪题稿.doc

目 录摘要2第一章、网络犯罪概念、特点以及构成特征5(一)网络犯罪的概念认定5(二)网络犯罪的特点6(三)网络犯罪的构成7第二章、?网络犯罪的类型9(一)网络色情和性骚扰9(二)欺诈9(三)贩卖、销售违禁物品11(四)妨害名誉、侵犯个人隐私12(五)?制造、传播计算机病毒12第三章、?网…

实例变量和静态变量(或类变量static)

一个类通过使用运算符new可以创建多个不同的对象&#xff0c;这些对象将被分配不同的内存空间&#xff0c;准确的说法是&#xff1a;不同对象的实例变量将被分配不同的内存空间&#xff0c;如果类中有类变量&#xff0c;那么所有对象的这个类变量都被分配到同一处内存&#xff…

DB2 数据库清表语句

truncate table DWDM2.tablename IMMEDIATE; alter table DWDM1.tablename activate not logged initially with empty table&#xff1b; but which one is best ? the truncate should be better 转载于:https://www.cnblogs.com/TendToBigData/p/10501485.html

cnblogs_504 Gateway Time-out

地址&#xff1a;http://zzk.cnblogs.com/s?tb&w%E6%B1%82%E8%81%8C 504 Gateway Time-out 504 Gateway Time-out The gateway did not receive a timely response from the upstream server or application. Sorry for the inconvenience. Please report this message an…

第一阶段

初步实现了相机的调用&#xff0c;做了简单界面&#xff0c;并没有实现核心功能 Button button (Button) findViewById(R.id.sao);button.setOnClickListener(new OnClickListener(){Overridepublic void onClick(View v) {Intent intent new Intent(MediaStore.ACTION_IMAGE…

JavaScript 详说事件机制之冒泡、捕获、传播、委托

DOM事件流&#xff08;event flow &#xff09;存在三个阶段&#xff1a;事件捕获阶段、处于目标阶段、事件冒泡阶段。 事件捕获&#xff08;event capturing&#xff09;&#xff1a;通俗的理解就是&#xff0c;当鼠标点击或者触发dom事件时&#xff0c;浏览器会从根节点开始…

很棒的HTML5效果实例

2019独角兽企业重金招聘Python工程师标准>>> http://mrdoob.com/141/Internet_Explorer_with_WebGL 转载于:https://my.oschina.net/u/3647620/blog/1552495

计算机一级网络操作题没点回答,计算机等级一级考试操作题1(附答案)

一、选择题1、在计算机领域中通常用mips来描述______。a、计算机的运算速度 b、计算机的可靠性 c、计算机的可运行性 d、计算机的可扩充性2、微型计算机存储系统中&#xff0c;prom是______。a、可读写存储器 b、动态随机存取存储器 c、只读存储器 d、可编程只读存储器3、按161…