快捷導(dǎo)航

利用JavaScript模擬京東按鍵輸入功能

更新時間：2020年12月01日 10:50:05 作者：我是Dreamer啊

這篇文章主要給大家介紹了關(guān)于如何利用JavaScript模擬京東按鍵輸入功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

在看到這個功能的時候我也很驚訝，京東竟然做了這樣的一個功能。在京東商城網(wǎng)頁版，無論你在什么位置，只需要按下S鍵，就可以將光標定位到搜索欄進行搜索。雖然說這是一個很不錯的功能，但是貌似沒有幾個人知道。

程序?qū)崿F(xiàn)很簡單，在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在鍵盤按下時觸發(fā)，焦點放到搜索框，然后會觸發(fā)S鍵，使S進入搜索框。
  //而使用keyup，是在鍵盤返回時進行得到焦點，因此搜索框中不會出現(xiàn)s.
 </script>
</body>
</html>

附：鍵盤事件keydown()與keyup()

1.鍵盤按下事件：keydown() 是在鍵盤按下就會觸發(fā)

2.鍵盤彈起事件：keyup() 是在鍵盤松手就會觸發(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ā)在文字還沒敲進文本框，這時如果在 keydown 事件中輸出文本框中的文本，得到的是觸發(fā)鍵盤事件前的文本，而 keyup 事件觸發(fā)時整個鍵盤事件的操作已經(jīng)完成，獲得的是觸發(fā)鍵盤事件后的文本

總結(jié)

到此這篇關(guān)于利用JavaScript模擬京東按鍵輸入功能的文章就介紹到這了,更多相關(guān)JS模擬京東按鍵輸入內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: