利用JavaScript模擬京東按鍵輸入功能
阿新 • • 發佈：2020-12-02
在看到這個功能的時候我也很驚訝，京東竟然做了這樣的一個功能。在京東商城網頁版，無論你在什麼位置，只需要按下S鍵，就可以將游標定位到搜尋欄進行搜尋。雖然說這是一個很不錯的功能，但是貌似沒有幾個人知道。
程式實現很簡單，在s鍵上升的時候搜尋框獲得焦點就可以了。
<!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() 是在鍵盤松手就會觸發
<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模擬京東按鍵輸入內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！