JavaScript Set Focus On Element
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Anjali
In this article we will show you the solution of JavaScript set focus on element, an HTML form element can be highlighted using JavaScript’s focus() technique.
Focus may only be placed on one piece of the documentation as it is currently written.
Now in this tutorial, we will also use the JavaScript window method. and also simultaneously see the blur method. in JavaScript, the blur method is reciprocal to the focus element.
Step By Step Guide On JavaScript Set Focus On Element :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript set focus on element</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<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 set focus on element </h3>
</center>
<button type="button" id="openbtn">Open Window</button>
<button type="button" id="focusbtn">Focus</button>
<button type="button" id="blurbtn">Blur</button>
<script>
var newWindow;
function openWin() {
newWindow = window.open("", "_blank", "width=30", "height=20") ;
}
function focusWin() {
newWindow.focus();
}
function blurWin() {
newWindow.blur();
}
document.getElementById("openbtn").addEventListener("click", openWin) ;
document.getElementById("focusbtn").addEventListener("click", focusWin) ;
document.getElementById("blurbtn").addEventListener("click", blurWin) ;
</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
- at first, create three buttons with the id’s of open window, the focus button, and the blur button.
- To write JavaScript, create a <script> tag
- Create a variable for newWindow.
- Then create a function for the window to be open. Using window.open() method
- Again create a function for focus on the window element and use the focus() method. Then also on the blurred window use the blur() method.
- Now use document.getElementById() of each of the button and add the addEventListener() tag with the event of click and adding the functions for each.
- Now if we click on the open window button, a new window will be opened. Then if we click on the blur method the window get out of the focus but if we click the focus button afterwards the window element get focused again.
Conclusion :-
At last, in conclusion, we can say that with this article’s help, we know How to focus on elements using JavaScript.
I hope this article on JavaScript set focus on element helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
