JavaScript Get Focused Element
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Ashish
In this article we will show you the solution of JavaScript get focused element, JavaScript’s focus() technique can highlight an HTML form element. Focus may only be placed on one piece of the documentation as it is currently written.
We will also simultaneously see the blur method. in JavaScript, the blur method is reciprocal to the focus element.
Now to get the focused element we will used jQuery. To use jQuery will have to include the external jQuery file into the head tag.
Step By Step Guide On JavaScript Get Focused Element :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript get focused element</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<script src="https://code.jquery.com/jquery-3.7.0.slim.min.js" integrity="sha256-tG5mcZUtJsZvyKAxYLVXrmjKBVLd6VpVccqz/r4ypFE=" crossorigin="anonymous"></script>
<style>
body{
background-color: aliceblue;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
h1{
color : rgb(95, 194, 95) ;
font-size: 25px;
font-weight : bolder ;
}
h3{
color : rgb(95, 194, 95) ;
font-size: 20px;
}
</style>
</head>
<body>
<center>
<h1> TALKERSCODE </h1>
<h3>javascript get focused element</h3>
</center>
<input type="text" placeholder="focus"/>
<br>
<input type="text" placeholder="blur" />
<script type="text/javascript">
$(document).ready(function() {
$("input").focus(function() {
$(this).css("background-color", "pink") ;
}),
$("input").blur(function() {
$(this).css("background-color", "blue") ;
});
}) ;
</script>
</body>
</html>
- writing HTML code <!DOCTYPE html> is used to specify the HTML version that a file is written in.
- The <HTML> tag used to specify the root of an HTML document must then be written. Additionally, add the </html> tag at the end.
- The metadata for the HTML file is contained in the <head> tag, which is closed with the </head> tag.
- The HTML document's <title> is then established using the title tag, which is followed by the < /title> tag.
- We'll use an external CSS file to style the HTML page.
- using <style> tag to add CSS
- create a <Center> tag the add a <h1> tag used to add a heading close it with </h1> tag and add a <h3> tag within it
- Create two inputs for focus and blur using <input> tag
- Include jQuery CDN file link into the <head> tag to use jQuery.
- To write JavaScript, create a <script> tag with type of text/javascript
- Use ready() method of jQuery with a function.
- Within it at the $(“input”) element with focus() method with a function(). Within the function target the element with CSS style of background-color.
- Again using $(“input) method with blur() method with a function(). Within the function target the element with CSS style of another background-color.
Conclusion :-
At last, in conclusion, we can say that with this article’s help, we know How to get focused elements using JavaScript.
I hope this article on JavaScript get focused element helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
