當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

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

發布時間：2023/12/13 javascript 24 豆豆

生活随笔收集整理的這篇文章主要介紹了通过键盘上下键 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');">鼓樓鳳凰北新村1 區西江濱待售(1) </a> </li> <li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=1&c=122&rs=鳳凰北新村1區" onclick="ga('send', 'pageview', '1');">鼓樓鳳凰北新村1 區萬寶商圈待售(1) </a> </li> <li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=5&c=129&rs=怡美嘉園1期" onclick="ga('send', 'pageview', '1');">倉山怡美嘉園1 期[怡美嘉園] 倉山步行街待售(3)</a></li> <li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=5&c=146&rs=怡美嘉園1期" onclick="ga('send', 'pageview', '1');">倉山怡美嘉園1 期[怡美嘉園] 三叉街待售(3) </a></li> <li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=3&c=127&rs=福興花園1期" onclick="ga('send', 'pageview', '1');">晉安福興花園1 期鼓山新東區待售(7)</a> </li> <li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=3&c=141&rs=福興花園1期" onclick="ga('send', 'pageview', '1');">晉安福興花園1 期福馬路待售(7)</a></li><li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=7&rs=融匯山水1期" onclick="ga('send', 'pageview', '1');">閩侯融匯山水1 期待售(32)</a></li> <li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=5&rs=振興花園1期">倉山振興花園1 期 </a></li><li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=3&c=155&rs=彩虹鋪景" onclick="ga('send', 'pageview', '1');">晉安彩虹鋪景[隆盛小區 1 #樓] 五四路（溫泉公園）待售(6)</a></li><li> <a href="/VIEW/HouseSecond/HouseSecondList.html?r=3&c=142&rs=彩虹鋪景" onclick="ga('send', 'pageview', '1');">晉安彩虹鋪景[隆盛小區 1 #樓] 火車站待售(6) </a></li></ol></body> </html>

轉載于:https://www.cnblogs.com/xiaoshi657/p/5445257.html

總結

以上是生活随笔為你收集整理的通过键盘上下键 JS事件，控制候选词的选择项的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：长安/华为/宁德时代联手打造阿维塔01
下一篇： gradle idea java ssm