Updated March 20, 2023
Introduction to jQuery focus()
The JQuery focus( ) method uses to handle mouse focus event by mouse click or mouse navigating. The jQuery focus( ) method is an inbuilt method in jQuery. The jQuery focus( ) method which is uses to focus on an html element when an element gains focus. The focus event generated by the mouse click or by the tab navigating on it.
The focus event is generated by the limited sets of html elements like form elements such as <input>, <select> etc. and links < a href >. The browsers highlight the focus elements in some way. Usually, we use the blur () method along with the focus( ) method.
Syntax
$(selector).focus()– It triggers or executes the focus event for selected elements.
$(selector).focus(function)– It triggers or executes a function for the focus event.
Parameter
function – function is an optional parameter, which is used to specify which function is to be executed when the html element gets the focus.
Examples of jQuery focus()
Below are the different examples:
Example #1
Html code to understand the jQuery focus() method more clearly with no function in the following example –
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery focus() Method </title>
<script src="https://code.jquery.com/jquery-1.10.2.js" > </script>
</head>
<body>
<p> Your Name : <input type="text"> </p>
<p> Your Password : <input type="password"> </p>
<input type="submit">
<script>
$( "input" ).focus();
</script>
</body>
</html>Output –
Once we click the input boxes,
Output –
In the above example code, when we click the mouse pointer on the selected element that is a text box, the text box gets focused as a blue color around it. The same focus the html elements get without using the non-parameterized focus function.
Example #2
Html code to understand the jQuery focus() method for handling focus event by using the function in focus( ) method.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery focus() Method </title>
<script src="https://code.jquery.com/jquery-1.10.2.js" > </script>
<style>
span {
display: none;
colour: red;
}
</style>
</head>
<body>
<p> Your Name : <input type="text"> <span> Focus start! ! write your name here. </span></p>
<p> Your Password : <input type="password"> <span> Focus start! ! Write your password here. </span></p>
<input type= "submit">
<script>
$( "input" ).focus(function() {
$( this ).next( "span" ).css( "display", "inline" );
});
</script>
</body>
</html>Output –
Once we click the input boxes,
Output –
In the above example code, when we click the mouse pointer on the selected element that is a text box, the text box gets focused as blue color and the inline text is written as in the red color.
Example #3
Now, we rewrite the above HTML code by adding the jQuery fadeOut() method
<!doctype html>
<html lang= "en">
<head>
<meta charset= "utf-8">
<title> This is an example for jQuery focus() Method </title>
<script src="https://code.jquery.com/jquery-1.10.2.js" > </script>
<style>
span {
display: none;
colour: red;
}
</style>
</head>
<body>
<p> Your Name : <input type="text"> <span> Focus start! ! write your name here. </span></p>
<p> Your Password : <input type="password"> <span> Focus start! ! Write your password here. </span></p>
<input type= "submit">
<script>
$( "input" ).focus(function() {
$( this ).next( "span" ).css( "display", "inline" ).fadeOut( 2500 );
});
</script>
</body>
</html>Output –
Once we click the input boxes,
Output –
In the above example code, when we click the mouse pointer on the selected element that is a text box, the text box gets focused as blue color and the inline text is written as in the red color next t6 text box and it fades out after 2500 milliseconds.
Example #4
Next, we write the html code we want to not allow people to write in the input text box by disabling to write in the text box, as doing in the below example code –
<!DOCTYPE html >
<html lang= "en">
<head>
<meta charset= "utf-8">
<title> This is an example for jQuery focus() Method </title>
<script src="https://code.jquery.com/jquery-1.10.2.js" > </script>
</head>
<body>
<p> Your Name : <input type= "text" value=" No value can write "></p>
<p> Your Password : <input type= "password"> </p>
<input type= "submit">
<script>
$( "input[ type=text ]" ).focus( function() {
$(this).blur();
});
</script>
</body>
</html>Output –
In the above example code, when we click the mouse pointer on the first text box, the text box not get focused and can not write anything in it.
Example #5
<!DOCTYPE html>
<html lang= "en">
<html>
<head>
<meta charset= "utf-8">
<title> This is an example for jQuery focus() Method </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body>
<p> Your Name : <input type="text" name="name"> </p>
<p> Your Password : <input type="password" name="pass"> </p>
<input type= "submit">
<script>
$("input").focus(function(){
$( this ).css("background-colour", "red");
});
</script>
</body>
</html>Output –
Once we click the input boxes,
Output –
In the above example code, when we click the mouse pointer on the selected element that is a text box, the text box gets focused as by changing the background color to red.
Conclusion
The JQuery focus( ) method uses to handle mouse focus event by mouse click or mouse navigating. The jQuery focus( ) method is an inbuilt method in jQuery. The syntax of the jQuery focus( ) is $(selector).focus( ) and $(selector).focus( function ), the parameter function is an optional parameter, which is used to specify which function is to be executes when html element gets the focus.
Recommended Articles
This is a guide to jQuery focus(). Here we discuss the different examples of jQuery focus( ) method along with the output. You may also have a look at the following articles to learn more –
