All TalkersCode Topics

Follow TalkersCode On Social Media - A Social Media Network for developers Join Now ➔

JavaScript Set Focus On Element

Last Updated : Mar 11, 2024

JavaScript Set Focus On Element

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">
    <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="">
            background-color: aliceblue;
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
          color : rgb(95, 194, 95) ;
          font-size: 25px;
          font-weight : bolder ;
            color : rgb(95, 194, 95) ;
            font-size: 20px;
        <h1> TALKERSCODE </h1>
        <h3> javascript set focus on element </h3>
    <button type="button" id="openbtn">Open Window</button>
    <button type="button" id="focusbtn">Focus</button>
    <button type="button" id="blurbtn">Blur</button>
        var newWindow;
        function openWin() {
            newWindow ="", "_blank", "width=30", "height=20") ;
        function focusWin() {
        function blurWin() {
        document.getElementById("openbtn").addEventListener("click", openWin) ;
        document.getElementById("focusbtn").addEventListener("click", focusWin) ;
        document.getElementById("blurbtn").addEventListener("click", blurWin) ;
  1. writing HTML code <!DOCTYPE html> is used to specify the HTML version that a file is written in.
  2. The <HTML> tag used to specify the root of an HTML document must then be written. Additionally, add the </html> tag at the end.
  3. The metadata for the HTML file is contained in the <head> tag, which is closed with the </head> tag.
  4. The HTML document's <title> is then established using the title tag, which is followed by the < /title> tag.
  5. We'll use an external CSS file to style the HTML page.
  6. using <style> tag to add CSS
  7. 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
  8. at first, create three buttons with the id’s of open window, the focus button, and the blur button.
  9. To write JavaScript, create a <script> tag
  10. Create a variable for newWindow.
  11. Then create a function for the window to be open. Using method
  12. 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.
  13. 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.
  14. 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.

Author Image About Anjali

Experienced Computer Programmer with a broad range of experience in technology. Strengths in application development and Object Oriented architecture design, front end programming, usability and multimedia technology. Expert in coding languages such as C, C++ Java, JavaScript, PHP and more.

Follow Anjali On Linkedin 🡪