在看到這個功能的時候我也很驚訝，京東竟然做了這樣的一個功能。在京東商城網頁版，無論你在什么位置，只需要按下S鍵，就可以將光標定位到搜索欄進行搜索。雖然說這是一個很不錯的功能，但是貌似沒有幾個人知道。
程序實現很簡單，在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在鍵盤按下時觸發，焦點放到搜索框，然后會觸發S鍵，使S進入搜索框。 //而使用keyup，是在鍵盤返回時進行得到焦點，因此搜索框中不會出現s. </script></body></html> |
附：鍵盤事件keydown()與keyup()
1.鍵盤按下事件：keydown() 是在鍵盤按下就會觸發
2.鍵盤彈起事件：keyup() 是在鍵盤松手就會觸發
|
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="監聽keydown輸入:" /> 按下顯示輸入的值:<em style="font-weight: 900;color: red;"></em></div><div style="margin:20px 0 0 20px;"> <input class="keyup k1" type="text" placeholder="監聽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> |
執行上述代碼塊可以看出
keydown 事件觸發在文字還沒敲進文本框，這時如果在 keydown 事件中輸出文本框中的文本，得到的是觸發鍵盤事件前的文本，而 keyup 事件觸發時整個鍵盤事件的操作已經完成，獲得的是觸發鍵盤事件后的文本
總結
到此這篇關于利用JavaScript模擬京東按鍵輸入功能的文章就介紹到這了,更多相關JS模擬京東按鍵輸入內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/weixin_42579348/article/details/110288670
