Do not run event when a text box has focus

Question

Do not run event when a text box has focus

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (0 votes)
#5 by (0 votes)

2

I have a function so that when you press a key, for example "and", youtube will open (as an event listener of 'keydown')

I have a input where I can not write because when I press one of the keys I already have as a shortcut inside the function, I open the page that is assigned to it.

I would like to know if there is a way so that, when the input is in focus, the function is not executed.

 var cuadroBusqueda = document.getElementById('buscar').focus(); -> Sí está en focus
 var btn = document.addEventListener('keydown', pressKey); ->quiero que se remueva sólo sí el unput de busqueda está en focus

 function pressKey(e) {
   if(e.keyCode == 89) 
       window.open("https://www.youtube.com/")
  };

Update: Thanks for the answers, I tried to do it with Marcos Martinez's method but unfortunately it did not work, what I mean or I'm looking to do is that having this pressKey () function opens a site by pressing a key for example I'm in the index.html of the page I'm doing, and I press the "and" key then redirects me to the youtube page. I already have it, now I have a search bar but when I have the function, if I am writing my search, pressing "and" opens YouTube and does not allow me to write, what I want to do is that when I'm in focus my search input, by pressing "and" do not open youtube

Update 2: Thank you very much for your help, in fact running the code of your answers works perfectly but doing it in the code that I wrote something is not right, I suppose it would transcribe it well YouTube is not the only key within my function. Once again, infinite thanks for your help. : D !!!

javascript html eventos

asked by Ilean 28.10.2017 в 06:38

source

5 answers

1

The idea you are raising is correct, only .focus () does not check if the element is in focus, if not set as an active element.

In turn, you do not need to remove the listener.

Using Document.activeElement you can check in your function pressKey() if the element that has the focus is the search input and in that case do not open a new page.

document.addEventListener('keydown', pressKey);

function pressKey(e) {
  console.log(document.activeElement);
  if(document.getElementById('buscar') !== document.activeElement){
     if(e.keyCode === 89) {
       alert("go to youtube");
     }
  }else{
       alert("elements has focus");
  }
 };

<input id="buscar" type="text"/>

answered by 28.10.2017 в 07:29

0

Here is the code, which mainly uses a variable "flag", which means that it is a variable that functions as a regulator of the function, this is the so-called "focused" because with this we can regulate and know, when it is any input of the document focused, if so, the shortcut DOES NOT WORK.

var focused = false;
window.addEventListener("DOMContentLoaded",()=>{ 
var inputs = document.getElementsByTagName("INPUT");
for(var input of inputs){
  input.addEventListener("focus",()=>{
  focused = true;
  });
}
  redirect(); 
});

function redirect(){
  window.addEventListener("keyup", e => {
  if((e.key === "y" || e.key == "Y") && !focused) alert("Ir a youtube?");
  });
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<input type="text" placeholder="Escribime aqui"/>
</body>
</html>

answered by 29.10.2017 в 04:35

0

Maybe you could do a conditional if to verify if your search bar has the focus, and if it does, that the YouTube page is not loaded.

Example:

//Tú barra de búsqueda
var cuadroBusqueda = document.getElementById('buscar'),
      tiene_el_foco = false;

cuadroBusqueda.addEventListener('focus', function(){
    tiene_el_foco = true;
}, false);
cuadroBusqueda.addEventListener('blur', function(){
    tiene_el_foco = false;
}, false);
document.addEventListener('keydown', pressKey, false);

function pressKey(e) {
    if(e.keyCode == 89 && tiene_el_foco == false){
        window.open("https://www.youtube.com/")
    }
}

I hope and it works for you.

answered by 29.10.2017 в 06:01

0

Maybe it's because of the event you're assigning it to.

const input = document.querySelector('#key')

function showPage(e) {
  switch(e.target.value) {
    case 'y': window.open('https://youtube.com', '_blank')
  }
  e.target.value = ''
}

input.addEventListener('keyup', showPage)

<input type="text" id="key">

answered by 30.10.2017 в 03:03

Access files in VS - C # Show bookmark in Google Maps Api Js (Only if you are inside the radio circle)

score 0 · Accepted Answer

For that you can add a property to the element in question. Here is an example that does what you require. You can click on the execute button that is at the end of the example. Greetings !!

window.addEventListener('load', main, false);

function main() {

  var inp = document.querySelector('#input');

  inp.focused = false;

  inp.addEventListener('focus', function(e) {
    inp.focused = true;
  }, false);

  inp.addEventListener('blur', function(e) {
    inp.focused = false;
  }, false);

  document.addEventListener('keydown', function(e) {

    if (inp.focused === false) {
      if ( e.key === 'a') {
        alert('Anastasia');
      } else if ( e.key === 'y' ) {
        alert('Youtube');
      }
    }

  }, false); //*/

}

<!DOCTYPE html>
<html>
  <head>
      <title> Focus!! </title>
  </head>
  <body>
    <input id="input" type="text" size="30">
  </body>
</html>