JS Function 无法使用 KeyCode / 我如何使用键盘键调用此 JS function

Question

Here is a simple script function getSelectedText() that is working on button click. It means that when we select any text and click on the button, the function is creating a new NEWCLASS div successfully. But now I want to use a shortcut key, like CTRL + W to get selected text in the NEWCLASS div.

I tried this code but it doesn't work. Please, check it and let me know what mistake I am making here.

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

My code:

 // 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

the ctrl key with w will close the chrome browser so I used "Z" key for that you can replace the key code with whatever you want.

Find the keycodes here

 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

You don't need to recall the event on the button, you should be capable of detect the press of the key you want and call the function, like:

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

Answer 3

Ctrl+W is not such a good choice, as on Windows it is a common shortcut key for closing the current Window or document, so your script will not even get the key event.

But I'll pick Ctrl+Y instead.

You should not use the deprecated keyCode property -- nor the which property which another answer suggests -- notice the red notice in the MDN documentation.

It is even easier with the key property. And you can use the ctrlKey property to know whether the control key is down.

I would use the keydown instead of the keyup event, as you can then cancel any default effect of the key, with a call to 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

This should work

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