HTML中JS怎么捕獲鍵盤事件？keydown與keyCode屬性應(yīng)用

在html中通過(guò)JavaScript捕獲鍵盤事件的方法是使用addEventlistener綁定keydown、keyup或keypress事件，并利用event.key或event.code獲取按鍵信息。1. keydown用于檢測(cè)按鍵按下，code取代了keycode以解決跨瀏覽器一致性問(wèn)題；2. key返回字符值受大小寫和布局影響，code返回物理鍵位不受影響；3. 阻止默認(rèn)行為可用event.preventdefault()，如阻止空格輸入；4. 組合鍵可通過(guò)檢查ctrlkey、shiftkey等屬性實(shí)現(xiàn)，如ctrl+c；5. 特定元素監(jiān)聽需將事件綁定到該元素而非document；6. 文本輸入推薦input事件，因其支持粘貼、拖拽等多種輸入方式。選擇合適屬性和事件類型可提升兼容性與功能準(zhǔn)確性。

在HTML中，我們可以通過(guò)JavaScript來(lái)捕獲鍵盤事件，主要依賴于keydown、keyup和keypress這三個(gè)事件類型。其中，keydown通常用于檢測(cè)用戶按下了哪個(gè)鍵，而keyCode屬性則能告訴你具體是哪個(gè)鍵被按下。不過(guò)，keyCode已經(jīng)逐漸被key和code屬性取代，因?yàn)閗eyCode在不同瀏覽器和操作系統(tǒng)上的表現(xiàn)并不一致。

解決方案：

要捕獲鍵盤事件，首先你需要一個(gè)html元素來(lái)監(jiān)聽這些事件。通常，你會(huì)選擇document或特定的input元素。然后，使用addEventListener方法來(lái)綁定事件監(jiān)聽器。

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

document.addEventListener('keydown', function(event) {   // event.keyCode 已經(jīng)被棄用，推薦使用 event.key 或 event.code   console.log('你按下了: ' + event.key); // 輸出按下的鍵的字符值   console.log('你按下了 (code): ' + event.code); // 輸出按下的鍵的物理位置 });

這段代碼會(huì)監(jiān)聽整個(gè)文檔的keydown事件，并在控制臺(tái)輸出你按下的鍵的字符值和物理位置。event.key會(huì)返回按鍵的字符值，例如 “a”、”Enter”、”Shift”。event.code會(huì)返回按鍵的物理位置，例如 “KeyA”、”Enter”、”ShiftLeft”。

key vs code：選擇哪個(gè)？

key屬性提供的是按鍵的字符值，它會(huì)受到鍵盤布局和大小寫的影響。例如，如果你按下了Shift+A，key會(huì)返回 “A”。而code屬性提供的是按鍵的物理位置，它不受鍵盤布局和大小寫的影響。例如，如果你按下了Shift+A，code仍然會(huì)返回 “KeyA”。

選擇哪個(gè)屬性取決于你的需求。如果你需要知道用戶按下了哪個(gè)字符，那么key屬性更適合你。如果你需要知道用戶按下了哪個(gè)物理按鍵，那么code屬性更適合你。

為什么keyCode被棄用了？

keyCode屬性的問(wèn)題在于它在不同瀏覽器和操作系統(tǒng)上的表現(xiàn)并不一致。例如，在某些瀏覽器上，keyCode會(huì)返回按鍵的ASCII碼，而在另一些瀏覽器上，它會(huì)返回按鍵的虛擬鍵碼。這導(dǎo)致了跨瀏覽器兼容性問(wèn)題。

key和code屬性的出現(xiàn)是為了解決這個(gè)問(wèn)題。它們提供了更一致和可靠的方式來(lái)獲取按鍵的信息。

如何阻止默認(rèn)行為？

有時(shí)候，你可能需要阻止按鍵的默認(rèn)行為。例如，你可能想阻止用戶在輸入框中輸入某些字符，或者阻止瀏覽器滾動(dòng)頁(yè)面。你可以使用preventDefault()方法來(lái)阻止默認(rèn)行為。

document.addEventListener('keydown', function(event) {   if (event.key === ' ') {     event.preventDefault(); // 阻止空格鍵的默認(rèn)行為     console.log('空格鍵被阻止了！');   } });

這段代碼會(huì)阻止空格鍵的默認(rèn)行為，例如在輸入框中輸入空格。

如何處理組合鍵？

處理組合鍵（例如Ctrl+C）需要檢查多個(gè)按鍵是否同時(shí)被按下。你可以使用event.ctrlKey、event.shiftKey和event.altKey屬性來(lái)檢查Ctrl、Shift和Alt鍵是否被按下。

document.addEventListener('keydown', function(event) {   if (event.ctrlKey && event.key === 'c') {     console.log('你按下了Ctrl+C！');     // 執(zhí)行復(fù)制操作   } });

這段代碼會(huì)檢測(cè)用戶是否按下了Ctrl+C，并輸出一條消息。

如何只監(jiān)聽特定元素的鍵盤事件？

如果你只想監(jiān)聽特定元素的鍵盤事件，可以將事件監(jiān)聽器綁定到該元素上。

<input type="text" id="myInput">  <script>   const inputElement = document.getElementById('myInput');    inputElement.addEventListener('keydown', function(event) {     console.log('輸入框中按下了: ' + event.key);   }); </script>

這段代碼只會(huì)監(jiān)聽id為myInput的輸入框的鍵盤事件。

如何處理文本輸入事件？

除了keydown事件，你還可以使用input事件來(lái)處理文本輸入。input事件在文本輸入框的值發(fā)生變化時(shí)觸發(fā)。

<input type="text" id="myInput">  <script>   const inputElement = document.getElementById('myInput');    inputElement.addEventListener('input', function(event) {     console.log('輸入框的值發(fā)生了變化: ' + inputElement.value);   }); </script>

這段代碼會(huì)在輸入框的值發(fā)生變化時(shí)輸出新的值。input事件比keydown事件更適合處理文本輸入，因?yàn)樗芴幚硭蓄愋偷妮斎耄ㄕ迟N、拖拽等。

總而言之，JavaScript捕獲鍵盤事件的關(guān)鍵在于使用addEventListener方法綁定keydown、keyup或keypress事件，并使用event.key或event.code屬性來(lái)獲取按鍵的信息。 記得根據(jù)實(shí)際需求選擇合適的事件類型和屬性，并考慮跨瀏覽器兼容性。

以上就是HTML中JS怎么捕獲