5

Tenho um input normal no html:

<input type="text" class="form-control" style=" width: 20%" id="hLane1"> </input>

Para fazer com que ele execute um evento basta eu usar o evento click

Mas e se eu precisar executar uma outra ação quando o usuario clicar fora do input?

Preciso que quando a seleção saia desse imput uma função seja executada.

4 Respostas 4

8

O próprio Javascript tem a função onblur que executa determinada ação ou função quando o input perder o foco (ser clicado fora):

function teste(){
  console.log('teste')
}
<input onblur="teste()">

5

Você pode utilizar o evento onblur que é disparado quando um elemento perde o foco, veja o exemplo abaixo:

let el = document.getElementById("hLane1");

el.onblur = function(){
   console.log("blur", "saiu do input" , this);
   /// ; utilizando desta forma o this aqui dentro sera o input
}
el.onfocus = function(){
   console.log("focus", "focou no input");
}
<input type="text" class="form-control" style=" width: 20%" id="hLane1"> </input>

Uma das vantagens de utilizar o onblur ao invés de um onclik fora do input é que se o usuário estiver navegando através da tecla TAB esse evento também sera disparado.

2

Como complemento aqui vai a versão em jQuery:

$( "#hLane1" ).blur(_ => { alert( "Hoje é sexta ^.^ " ); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control" style=" width: 20%" id="hLane1"> </input>

Documentação jQuery
.blur()

1

Você pode usar a função .on como múltiplos eventos e utilizar o click e o blur para fazer isso:

$('.teste').on({
  click: function () {
    console.log('Fui clicado!')
  },
  blur: function() {
    console.log("Sai do input")
  } 
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="name" class="teste" placeholder="Escreva aqui...">

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .