Know whether input is focused or not in real time

Question

Know whether input is focused or not in real time

Navigation

#1 by (4 votes)

0

Hello, I would like to make a condition in javascript where input is focused, label is none and when the person clicks off it and "blurs", label reappears. But I do not know how to do this condition to check the real time, I already researched on

I know how to get the value of .focus = true/false , but I do not know in real time. Can you do that?

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>

input tempo-real

asked by anonymous 25.10.2018 / 21:09

1 answer

How to set the Index of a List to start at 1 instead of 0 when populated Problems displaying an array of functionaries in a Main class

score 4 · Accepted Answer

You can use focus events (when the element receives 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 just do this 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 example above we used the adjacent element selector .