Execute function when losing focus of an input

Question

I have a normal html input:

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

To make it run an event just use the event click

But what if I need to perform another action when the user clicks off the input?

I need that when the selection leaves that imput a function is executed.

Answer 1

The very one Javascript has the function onblur performing a particular action or function when the input lose focus (be clicked out):

function teste(){
  console.log('teste')
}

<input onblur="teste()">

Answer 2

You can use the event onblur that is triggered when an element loses focus, see the example below:

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>

One of the advantages of using the onblur instead of a onclik outside the input is that if the user is browsing through the key TAB that event will also be triggered.

Answer 3

As an add-on here goes the jQuery version:

$( "#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>

Documentation jQuery
.Blur()

Answer 4

You can use the . on function as multiple events and use click and Blur to do this:

$('.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...">