2

Tengo una función para que cuando presione una tecla, por ejemplo "y", se abra youtube (como event listener de 'keydown')

Tengo un input donde no puedo escribir porque al presionar una de las teclas que ya tengo como shortcut dentro de la función, me abre la pagina que tiene asignada.

Quisiera saber si hay un modo para que, cuando el input este en foco, la función no se ejecute.

 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/")
  };

Actualización: Gracias por las respuestas, intenté hacerlo con el método de Marcos Martinez pero lamentablemente no funcionó, a lo que me refiero o busco hacer es que al tener esta función de pressKey() se abre un sitio al presionar una tecla por ejemplo estoy en el index.html de la pagina que estoy haciendo, y presiono la tecla "y" entonces me redirige a la pagina de youtube. Eso ya lo tengo, ahora, tengo una barra de busqueda pero al tener la función si estoy escribiendo mi búsqueda, al presionar "y" se abre youtube y no me permite escribir, lo que quiero hacer es que al momento en que este en focus mi input de busqueda, al presionar "y" no se abra youtube

Actualización 2: Muchísimas gracias por su ayuda, en efecto corriendo el código de sus respuestas funciona perfectamente pero al hacerlo en el código que yo escribí algo no anda bien, supongo sería cosa de transcribirlo bien pues youtube no es la única tecla dentro de mi función. Una vez más gracias infinitas por su ayuda. :D!!!

4
  • 2
    Hola! Podrías describir el problema en otras palabras. Entiendo que cuando tu estas escribiendo en un input, ya el campo tiene el focus, por lo que no comprendo la funcionalidad.
    – Javier
    Commented el 28 oct. 2017 a las 4:46
  • La respuesta de Marcos debería funcionarte. ¿Podrías publicar un ejemplo mínimo verificable mostrando el HTML y cuándo no te funciona?
    – Mariano
    Commented el 30 oct. 2017 a las 3:03
  • Lamento no haber respondido estoy con tareas de la universidad y no he tenido tiempo. Muchisimas gracias por la ayuda estaré probando las opciones que me han dado, y si, @Mariano mira el código que hice para hacer el shortcut es el siguiente
    – Ilean
    Commented el 31 oct. 2017 a las 5:28
  • document.addEventListener('keydown', pressKey); if(e.keyCode == 89) { window.open("youtube.com/") } else if (e.keyCode == 83) { window.open("soundcloud.com/you/likes") } y para que no se active el shortcut lo que hice primero fue: window.load = document.getElementById('buscar').focus(); if (document.getElementById('busacar') == true) {removeEventListener();}
    – Ilean
    Commented el 31 oct. 2017 a las 5:39

5 respuestas 5

1

La idea que planteas es correcta, solo que .focus() no chequea si está en foco el elemento si no que lo setea como elemento activo.

A su vez, no es necesario que quites el listener.

Mediante Document.activeElement puedes chequear en tu función pressKey() si el elemento que tiene el foco es el input de búsqueda y en ese caso no abrir una nueva página.

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

1
  • 1
    Esta es la forma, sin duda... Quizás sería más práctico comprobar document.activeElement.iden vez de obtener el elemento y ver si es el mismo.
    – Mariano
    Commented el 30 oct. 2017 a las 2:59
0

Para eso puedes agregarle una propiedad al elemento en cuestion. Ahi te va un ejemplo que hace lo que requieres. Puedes dar click en el boton de ejecutar que esta al final del ejemplo. Saludos!!

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>

0

Aquí está el código, que principalmente uso una variable "flag" , que significa que es una variable que funciona como reguladora de la funcion, esta es la llamada "focused" ya que con esta podemos regular y saber, cuando esta cualquier input del documento enfocado, si es asi, el shortcut NO FUNCIONA.

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>

0

Tal vez podrías hacer un condicional if para verificar si tú barra de búsqueda tiene el foco, y si lo tiene, que no se cargue la página de YouTube.

Ejemplo:

//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/")
    }
}

Espero y te funcione.

0

Quizá sea por el evento el cuál le estás asignando.

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.