JS Function 無法使用 KeyCode / 我如何使用鍵盤鍵調用此 JS function

Question

這是一個正在單擊button的簡單腳本 function getSelectedText() 。 這意味着當我們 select 任何文本並單擊按鈕時，function 正在成功創建一個新的NEWCLASS div。 但現在我想使用快捷鍵，如CTRL + W來獲取NEWCLASS div 中的選定文本。

我試過這段代碼，但它不起作用。 請檢查一下，讓我知道我在這里犯了什么錯誤。

var input = document.getElementsByTagName("body")[0];
input.addEventListener("keyup", function(event) {
  if (event.keyCode === 37) {
   event.preventDefault();
   document.getElementById("myBtn").click();
  }
});

我的代碼：

 // Function to get the Selected Text function getSelectedText() { var selectedText = ''; // #### create a new element with variable (nw) #### // var nw = document.createElement("div"); // Element's tag nw.className = "NEWCLASS"; // Element's class name // some applied style // window.getSelection if (window.getSelection) { selectedText = window.getSelection(); } // document.getSelection else if (document.getSelection) { selectedText = document.getSelection(); } // document.selection else if (document.selection) { selectedText = document.selection.createRange().text; } else return; // #### get the Selected text appended to body #### // nw.innerHTML = selectedText; document.getElementsByClassName('maintitle')[0].prepend(nw); // Append element to body }

 <button id="mybtn" onclick="getSelectedText()">Button</button> <p>Select any part of this sentence and press the button. Select any part of this sentence and press the button. Select any part of this sentence and press the button</p> <div class="maintitle"> </div>

Answer 1

帶有 w 的 ctrl 鍵將關閉 chrome 瀏覽器，所以我使用“Z”鍵，您可以用任何您想要的替換鍵代碼。

在這里找到鍵碼

 const keySelected = new Set(); document.addEventListener('keydown', (e) => { keySelected.add(e.which); if(keySelected.has(17) && keySelected.has(90)){ getSelectedText(); } }); document.addEventListener('keyup', (e) => { keySelected.delete(e.which); }); /* //jquery code if anyone want $(document).ready(function(){ const keySelected = new Set(); $(document).keydown(function (e) { keySelected.add(e.which); if(keySelected.has(17) && keySelected.has(90)){ getSelectedText() } }); $(document).keyup(function (e) { keySelected.delete(e.which); }); }); */ // Function to get the Selected Text function getSelectedText() { var selectedText = ''; // #### create a new element with variable (nw) #### // var nw = document.createElement("div"); // Element's tag nw.className = "NEWCLASS"; // Element's class name // some applied style // window.getSelection if (window.getSelection) { selectedText = window.getSelection(); } // document.getSelection else if (document.getSelection) { selectedText = document.getSelection(); } // document.selection else if (document.selection) { selectedText = document.selection.createRange().text; } else return; // #### get the Selected text appended to body #### // nw.innerHTML = selectedText; document.getElementsByClassName('maintitle')[0].prepend(nw); // Append element to body }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="mybtn" onclick="getSelectedText()">Button</button> <p> Select any part of this sentence and press the button. Select any part of this sentence and press the button. Select any part of this sentence and press the button </p> <div class="maintitle"> </div>

Answer 2

您不需要調用按鈕上的事件，您應該能夠檢測到您想要的鍵的按下並調用 function，例如：

document.addEventListener('keydown', (e) => {
    if (e.ctrlKey && e.code === 'keyW')    {
        getSelectedText();
    }
});

Answer 3

Ctrl+W不是一個很好的選擇，因為在 Windows 上它是關閉當前 Window 或文檔的常用快捷鍵，所以你的腳本甚至不會得到關鍵事件。

但我會選擇Ctrl+Y代替。

您不應使用已棄用的keyCode屬性——也不要使用另一個答案建議的which屬性——請注意 MDN 文檔中的紅色通知。

使用key屬性更容易。 並且您可以使用ctrlKey屬性來知道控制鍵是否按下。

我會使用 keydown 而不是 keyup 事件，因為您可以通過調用cancelDefault來取消該鍵的任何默認效果。

 document.addEventListener("keydown", (event) => { if (event.ctrlKey && event.key == "y") { event.preventDefault(); getSelectedText(); } }); // Your original code: function getSelectedText() { var selectedText = ''; var nw = document.createElement("div"); // Element's tag nw.className = "NEWCLASS"; // Element's class name if (window.getSelection) { selectedText = window.getSelection(); } else if (document.getSelection) { selectedText = document.getSelection(); } else if (document.selection) { selectedText = document.selection.createRange().text; } else return; nw.innerHTML = selectedText; document.getElementsByClassName('maintitle')[0].prepend(nw); }

 <button id="mybtn" onclick="getSelectedText()">Button</button> <p>Select any part of this sentence and press the button or enter Ctrl+Y. Select any part of this sentence and press the button or enter Ctrl+Y. Select any part of this sentence and press the button or enter Ctrl+Y. </p> <div class="maintitle"> </div>

Answer 4

這應該有效

var input = document.getElementsByTagName("body")[0];
input.keypress("w", function(event) {
  if (event.ctrlKey) {
   event.preventDefault();
   document.getElementById("myBtn").click();
  }
});