how to create a function to the focus event. The focus event occurs (display a message regarding the text field) when the field gets focus.

The focus event occurs when an element gets focus (when selected by a mouse click or by “tab-navigating” to it).

The focus() method triggers the focus event, or attaches a function to run when a focus event occurs.

Tip: This method is often used together with the Blur() method.

HTML Code :

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>Attach a function to the focus event</title>
</head>
<body>
<p><input type="text"> <span>Input your first name</span></p>
<p><input type="text"> <span>Input your last name</span></p>
</body>
</html>

CSS Code:

span {
    display: none;
  }

Copy

JavaScript Code :

$( "input" ).focus(function() {
  $( this ).next( "span" ).css( "display", "inline" ).fadeOut(5000);
});

Leave a comment Cancel reply