stop function from running if user types in the input

Question

Hi i know this is probably a silly question but i only started to learn javascript today but i was wondering if someone could help me or point me in the right direction i'm wondering how can i stop a function from running that fires on keydown when a user is typing in the input

javascript

window.addEventListener("onkeydown", keyDown, true);
window.addEventListener("keydown", keyDown);

function keyDown(e) {
  switch (e.keyCode) {
    case 86: // Key V = myFunction
      myFunction();
      break;
    }
}

    function myFunction() {
      // do something
      console.log("oh no the function fired why typing in the input!")
    }

input

<input type="text" name="message" class="chat-input" placeholder="Enter your chat message..." maxlength="140">

possible duplicate of [Early exit from function?](https://stackoverflow.com/questions/3330193/early-exit-from-function) — Maheer Ali, Jan 29 '19 at 09:42

score 0 · Answer 1 · answered Jan 29 '19 at 09:41

Create a boolean value & use it in the function

let canExecute = true;
window.addEventListener("onkeydown", keyDown, true);
window.addEventListener("keydown", keyDown);

function keyDown(e) {
  switch (e.keyCode) {
    case 86: // Key V = myFunction
      myFunction();
      break;
  }
}

function myFunction() {
  if (canExecute) {
    // this will only execute once
    // do something
    console.log("oh no the function fired why typing in the input!")
  } 

  canExecute = false;
}

<input type="text" name="message" class="chat-input" placeholder="Enter your chat message..." >

@MaxxieB Thanks, if you thought that this or other answers were helpful, please upvote and mark an answer as verified so that this thread be closed and other people won't come here to waste their time. — Danyal Imran, Jan 29 '19 at 10:12

user1039663 · Accepted Answer · 2019-01-29T09:58:01.463

I think this is not about exiting a function... seems user asks about avoiding to run a event associated to the window onkey event if focus is on an input form element.

For this to work you cannot declare window.addEventListener("onkeydown", keyDown, true) with true, because this will associate keyDown function to the capturing event handling sequence. You need to associate to the bubbling so use instead false in the last argument.

window.addEventListener("keydown", keyDown, false);

Then in the input associate an dummy event handler and stop the propagation of the event, like this:

var inputObj = document.querySelector(".chat-input");
inputObj.addEventListener("keydown", function(e) {
    e.stopPropagation();
}, false);

By doing this if browser focus is on the input element the inputObj event handler will be triggered before the window handler and by stopping the propagation the event will not be propagated to the window handler so keyDown function will not receive the event.

Other way to do this is to check the e.target property which contains the element focused when the event was triggered and discard the event if needed.

Check for example What is event bubbling and capturing? for more info.

stop function from running if user types in the input

2 Answers2