通过键盘上下键 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

通过键盘上下键 JS事件，控制候选词的选择项相关推荐

常用CSS与Flex布局、媒体查询、JS事件控制css、VUE对象语法、Gride布局(待补全) CSS权重页面适配笔记本缩放
css属性就是要用的多用的熟知道的多就像一本工具书除了基础原理剩下的就是知识面了极力推荐MDN用过的人都说好~ 页面适配笔记本等自带缩放的场景 let t = window.devicePi ...
使用jsonp跨域调用百度js实现搜索框智能提示，并实现鼠标和键盘对弹出框里候选词的操作【附源码和在线测试地址】
项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择. 使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScrip ...
android 键盘自动消失,android 软键盘回到键消失事件监听
弹出输入法时隐藏了 '底部状态栏' 在按物理返回键后, 软键盘消失后恢复 '底部状态栏' public class ImageViewCareIME extends ImageView { ...
Js获取下拉框当前选择项的文本和值
https://blog.csdn.net/qq_37272886/article/details/78974200 转载于:https://www.cnblogs.com/Andrew520/p/9 ...
html鼠标键弹起事件,js鼠标按键事件和键盘按键事件用法实例汇总
本文实例讲述了js鼠标按键事件和键盘按键事件用法.分享给大家供大家参考,具体如下: keydown,keyup,keypress:属于你的键盘按键 mousedown,mouseup:属于你的鼠标按键 ...
处理js事件时，获取键盘数字注意
js在处理键盘事件时,可通过 keyCode获取按键,但键盘数字键需要注意:除了48到57,还有 96到107. 转载于:https://www.cnblogs.com/ppinfo/archive/ ...
事件冒泡及阻止事件冒泡事件的触发事件参数对象获取用户按下键盘的键
事件冒泡及阻止事件冒泡 <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
【杂记】（input获取焦点失去焦点、获取input中输入的值、键盘事件、js事件、Math 属性、手机自适应meta定义、去掉input内置阴影、图片居中、去蓝色默认背景、点击去掉默认边框）
1. input获取焦点失去焦点 input:focus{border:1px red solid:} 获取焦点 .focus()失去焦点.blur() 2. 获取input中输入的值 <inp ...
layui table 可编辑单元格 JS实现通过键盘上下左右键光标焦点移动到旁边的编辑行/列
layui table 可编辑单元格 JS实现通过键盘上下左右键光标焦点移动到旁边的编辑行/列类似效果上下左右键实现的代码 layui.config({base: '/static/layuia ...

通过键盘上下键 JS事件，控制候选词的选择项

效果图

JS代码

html代码

通过键盘上下键 JS事件，控制候选词的选择项相关推荐

最新文章

热门文章