在看到這個功能的時候我也很驚訝，京東竟然做了這樣的一個功能。在京東商城網(wǎng)頁版，無論你在什么位置，只需要按下S鍵，就可以將光標定位到搜索欄進行搜索。雖然說這是一個很不錯的功能，但是貌似沒有幾個人知道。
程序?qū)崿F(xiàn)很簡單，在s鍵上升的時候搜索框獲得焦點就可以了。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>按下S鍵光標定位搜索框</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在鍵盤按下時觸發(fā)，焦點放到搜索框，然后會觸發(fā)S鍵，使S進入搜索框。 //而使用keyup，是在鍵盤返回時進行得到焦點，因此搜索框中不會出現(xiàn)s. </script></body></html> |
附：鍵盤事件keydown()與keyup()
1.鍵盤按下事件：keydown() 是在鍵盤按下就會觸發(fā)
2.鍵盤彈起事件：keyup() 是在鍵盤松手就會觸發(fā)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<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ā)在文字還沒敲進文本框，這時如果在 keydown 事件中輸出文本框中的文本，得到的是觸發(fā)鍵盤事件前的文本，而 keyup 事件觸發(fā)時整個鍵盤事件的操作已經(jīng)完成，獲得的是觸發(fā)鍵盤事件后的文本
總結(jié)
到此這篇關(guān)于利用JavaScript模擬京東按鍵輸入功能的文章就介紹到這了,更多相關(guān)JS模擬京東按鍵輸入內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/weixin_42579348/article/details/110288670
