CODEWITHSUNDEEP
javascript
Iisrael
Iisrael

Reputation: 405

How to reference all <input> and <textarea> and do an action if they have :focus?

I am trying to use plain Javascript to set up a function that fires when the S key is pressed AND the search overlay is not already open AND the S is not pressed when inside an <input> or <textarea>. The issue is in the third argument and I can't seem to figure it out.

Can you please tell me how to set up the third argument in the IF statement?

I have been trying to get an equivent of the JQuery is() function in regular JS. Since I don't know much about JS I am avoiding JQuery until I get the basics down. I have created a class for OOP, so the this. is referencing that.

My Javascript:

keyPressControl(event) {
    if (event.keyCode == 83 && !this.isOverlayOpen && !document.querySelectorAll('input, textarea').hasFocus()) {

    this.staffSearchOpen();
    }
}

The this.staffSearchOpen(); should function when all three arguments noted above are true, but I can only get the first two to work properly.

Upvotes: 0

Views: 682

Answers (2)

Daniel Beck
Daniel Beck

Reputation: 21485

The wording of the question is a little confusing but it looks like you're trying to exclude event that happen when an input field is in focus, not the other way around.

Instead of "hasFocus()" you could just build the rule into the selector itself as input:focus, textarea:focus:

document.addEventListener('keypress', function() {
  if (document.querySelector('input:focus, textarea:focus')) {
    console.log("keypress event was inside an input")
  } else {
    console.log("No input in focus");
  }
})
<input>
<textarea></textarea>

...so your function could be:

keyPressControl(event) {
  if (
    event.keyCode == 83 && 
    !this.isOverlayOpen &&
    !document.querySelector('input:focus, textarea:focus')
  ) {
      this.staffSearchOpen();
    }
}

Upvotes: 1

ControlAltDel
ControlAltDel

Reputation: 35011

Do it the other way around:

var elems = document.querySelectorAll('input, textarea');
elems.foreach(function (elem) {
  this.addEventListener("keydown",keyPressControl);
});

keyPressControl(event) {
  //you won't get a key event here unless the element is the focus owner
  if (event.keyCode == ...) {
    this.staffSearchOpen();
  }
}

Upvotes: 1

Related Questions