Knowing if input is focused or not in real time

Question

Hello, I would like to make a condition in javascript where the input is focused, a label stay none and when the person clicks off it and "blurs", the label reappear. But I don’t know how to make this condition of checking real time, I’ve researched about

I know there’s a way to get the value of .focus = true/false, but I don’t know in real time. It has how to do this ?

function busca() {
  var lupa = document.getElementById("lupa");
  var busca = document.getElementById("espacobuscar");
  var input = document.getElementById("buscaprod");
  input.autofocus = true;
  busca.style.cssFloat = "left";
  busca.style.display = "block";
  lupa.style.display = "none";
}

<div id="espacobuscar" class="fl">
  <!-- Aqui é o input da busca -->
  <input type="text" id="buscaprod" onkeyup="proc_produto_catalog(this.value)" placeholder="Buscar" />
  <div id="ls_produto_catalogo"></div>
</div>
<img id="lupa" onclick="busca()" src="../_imagens/lupa.png" />
<!-- Aqui é uma lupa que quando clicada, aparece o input -->

<div class="fr">
  <label id="label_mobile" class="fl" for="span_ped">Tipo de Pedido: </label>
  <!-- Esse é o label que tem que desaparecer quando a busca estiver com foco -->
  <div id="tipo_ped">
    <span id="span_ped"></span>
  </div>
</div>

Answer 1

You can use the events phocus (when the element receives the focus) and Blur (when the element loses focus).

Example:

var teste = document.getElementById('teste');
var feedback = document.getElementById('feedback');

teste.addEventListener('focus', function() {
  feedback.hidden = true;
});

teste.addEventListener('blur', function() {
  feedback.hidden = false;
});

*[hidden] {
  display: none;
}

<input id="teste">
<div id="feedback">Input sem foco</div>

Or do this only with CSS using the pseudo class :focus:

.teste + .feedback {
  display: block;
}

.teste:focus + .feedback {
  display: none;
}

<input class="teste">
<div class="feedback">Input sem foco</div>

In the above example was used the adjacent element selector.