利用JavaScript模擬京東按鍵輸入功能
在看到這個(gè)功能的時(shí)候我也很驚訝,京東竟然做了這樣的一個(gè)功能。在京東商城網(wǎng)頁版,無論你在什么位置,只需要按下S鍵,就可以將光標(biāo)定位到搜索欄進(jìn)行搜索。雖然說這是一個(gè)很不錯(cuò)的功能,但是貌似沒有幾個(gè)人知道。
程序?qū)崿F(xiàn)很簡(jiǎn)單,在s鍵上升的時(shí)候搜索框獲得焦點(diǎn)就可以了。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>按下S鍵光標(biāo)定位搜索框</title> </head> <body> <input type="text"> <script> var search = document.querySelector('input'); document.addEventListener('keyup',function(e){ //可以使用console.log(e.keyCode)打印一下S鍵的ASCII值 if(e.keyCode === 83){ search.focus(); } }) //在這里使用keyup而不使用keydown, //keydown在鍵盤按下時(shí)觸發(fā),焦點(diǎn)放到搜索框,然后會(huì)觸發(fā)S鍵,使S進(jìn)入搜索框。 //而使用keyup,是在鍵盤返回時(shí)進(jìn)行得到焦點(diǎn),因此搜索框中不會(huì)出現(xiàn)s. </script> </body> </html>
附:鍵盤事件keydown()與keyup()
1.鍵盤按下事件:keydown() 是在鍵盤按下就會(huì)觸發(fā)
2.鍵盤彈起事件:keyup() 是在鍵盤松手就會(huì)觸發(fā)
<h1>keydown()與keyup()事件</h1> <div style="margin:10px 0 20px 20px;"> <input class="keydown k1" type="text" placeholder="監(jiān)聽keydown輸入:" /> 按下顯示輸入的值:<em style="font-weight: 900;color: red;"></em> </div> <div style="margin:20px 0 0 20px;"> <input class="keyup k1" type="text" placeholder="監(jiān)聽keyup輸入:" /> 松手顯示輸入的值:<em style="font-weight: 900;color: red;"></em> </div> <script src="~/Content/jquery.2.1.4.min.js"></script> <script> $(".keydown").keydown(function (e) { $("em").first().text(e.target.value); }); $(".keyup").keyup(function (e) { $("em:last").text(e.target.value); }); </script>
執(zhí)行上述代碼塊可以看出
keydown 事件觸發(fā)在文字還沒敲進(jìn)文本框,這時(shí)如果在 keydown 事件中輸出文本框中的文本,得到的是觸發(fā)鍵盤事件前的文本,而 keyup 事件觸發(fā)時(shí)整個(gè)鍵盤事件的操作已經(jīng)完成,獲得的是觸發(fā)鍵盤事件后的文本
總結(jié)
到此這篇關(guān)于利用JavaScript模擬京東按鍵輸入功能的文章就介紹到這了,更多相關(guān)JS模擬京東按鍵輸入內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
原生JS實(shí)現(xiàn)幾個(gè)常用DOM操作API實(shí)例
下面小編就為大家?guī)硪黄鶭S實(shí)現(xiàn)幾個(gè)常用DOM操作API實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01JavaScript實(shí)現(xiàn)表格表單的隨機(jī)選擇和簡(jiǎn)單的隨機(jī)點(diǎn)名
本文主要介紹了JavaScript實(shí)現(xiàn)表格表單的隨機(jī)選擇和簡(jiǎn)單的隨機(jī)點(diǎn)名,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08JavaScript實(shí)現(xiàn)動(dòng)態(tài)高度過渡的3種方式總結(jié)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)高度過渡的3種方式,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01webpack5新特性Asset?Modules資源模塊詳解
這篇文章主要為大家介紹了webpack5新特性Asset?Modules資源模塊詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03pnpm install:ERR_PNPM_PEER_DEP_ISSUES Unmet p
這篇文章主要為大家介紹了pnpm install:ERR_PNPM_PEER_DEP_ISSUES Unmet peer dependencies報(bào)錯(cuò)解決2023-06-06JavaScript實(shí)現(xiàn)向setTimeout執(zhí)行代碼傳遞參數(shù)的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)向setTimeout執(zhí)行代碼傳遞參數(shù)的方法,分析了向setTimeout傳遞參數(shù)的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04JavaScript實(shí)現(xiàn)簡(jiǎn)單貪吃蛇效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單貪吃蛇效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03