Introduction🥸
In this article will discuss the jQuery Focus Method, why it is used, and how to apply it in HTML.
First, let’s start discussing what JQuery is. This is an essential tool used in designing the front end. JQuery is used to simplify, shorten and beautify the codes written in javascript. JQuery also plays an important role in DOM manipulation. DOM manipulation includes changing HTML elements, CSS elements, zooming in elements, zooming out elements, animating elements, and many more.
Basically, its purpose is to make JS(Javascript) easier to use on websites.
jQuery Focus Method 🧑💻
It is a method that jQuery includes by default that is used to spotlight an element.
We can target the element by using the mouse or the tab-navigation button.
Syntax:
$(selector).focus(func)Selector -is the chosen element in this case.
Func- Passing function as a parameter.
Parameter: It accepts an optional parameter “function,” which specifies the function to run when the focus event occurs.
// Implementation of jQuery Focus Method: 🖥️
Case #1: Without passing a func(function) to the method.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Focus() Method</title>
<style>
span {
display: none;
color: white;
background-color: blue;
}
body {
background-color: black;
width: 25%;
height: 150px;
border: 2px solid rgb(97, 188, 184);
padding: 15px;
margin: 15px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div >
<h1 style="color:orangered;">
Coding Ninjas
</h1>
<p1 style="background-color: white;">
jQuery Focus() Method
</p1>
<!-- the element in this will get focus -->
<p>
<input type="text"> <span>Focus Method is working</span></p>
<!-- jQuery code -->
<!-- working of this method -->
<!-- Input is the selected element, and the function is NOT passed -->
<script>
$("input").focus();
</script>
</body>
</html>
Case #2: Passing a func(function) to the method-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Focus() Method</title>
<style>
span {
display: none;
color: white;
background-color: blue;
}
body {
background-color: black;
width: 25%;
height: 150px;
border: 2px solid rgb(97, 188, 184);
padding: 15px;
margin: 15px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div >
<h1 style="color:orangered;">
Coding Ninjas
</h1>
<p1 style="background-color: white;">
jQuery Focus() Method
</p1>
<!-- the element in this will get focus -->
<p>
<input type="text"> <span>Focus Method is working</span></p>
<!-- jQuery code -->
<!-- working of this method -->
<!-- Input is the selected element , and the function is passed -->
<!-- fadeOut is used for changing the opacity of text -->
<script>
$("input").focus(function() {
$(this).next("span").css("display", "inline").fadeOut(5000);
});
</script>
</body>
</html>
Try this code with online javascript compiler for better understanding.
34+ registered 
