jQuery — Focus and Has Selectors

Photo by Alex Batonisashvili on Unsplash

jQuery is a popular JavaScript for creating dynamic web pages.

In this article, we’ll look at how to using jQuery in our web apps.

.focusin()

The .focusin() method binds an event handler to the focusin event.

For example, if we have:

<p><input type="text"> <span>focusin fire</span></p>
<p><input type="text"> <span>focusin fire</span></p>

Then we can write:

$("p").focusin(function() {
  $(this).find("span").css("display", "inline").fadeOut(1000);
});

We get the span and fade it out when we focus on the input inside the p element.

.focusout()

The focusout method lets us bind an event handler to the focusout JavaScript event.

For example, if we have:

<p><input type="text"> <span>focusout fire</span></p>
<p><input type="text"> <span>focusin fire</span></p>

We can write:

let focus = 0;
$("p")
  .focusout(function() {
    focus++;
    console.log(focus);
  })

to count the number of times the focusout event is triggered.

It’ll be triggered when we move focus on out of the p element.