Skip to content
Related Articles

Related Articles

Which event will be triggered when element get focused in HTML ?

View Discussion
Improve Article
Save Article
  • Last Updated : 30 Jan, 2022

When the user interacts with the HTML elements, HTML has the ability to let events trigger actions in a browser, such as a user clicks on an element, focus in or focus out of an element etc. The events that are related to focus are contained within the DOM FocusEvent Object. The onfocus will be triggered when an element is in focus in HTML. 

The DOM onfocus event occurs at the time when an element is in focus. The tags with which the onfocus event is mostly used are <a>, <select> and <input>. Tags supported by the HTML DOM onfocus event are all tags except <html>, <param>, <script>, <title>, <style>, <meta>, <head>, <br>, <iframe>, <base>, <bdo>.

Note: The way onfocus event is different from onfocusin event is that the earlier does not bubble.

Syntax: 

Using addEventListener() method:

Element.addEventListener("focus",function(cb){});

 Using in HTML:

<element onfocus="functionFocus">

Example 1: In this example when the input element is in focus, its outline gets removed and gets a border with black color. Also a message tells when the element is in focus and when it is out of focus.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Example 1</title>
    <style>
        .container {
            background-color: green;
            height: 200px;
            width: 400px;
            font-size: 18px;
            text-align: center;
            color: whitesmoke;
            margin: auto;
            font-family: 'Courier New', Courier, monospace;
        }
          
        input {
            height: 35px;
            width: 250px;
            outline: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>GeeksforGeeks</h2>
        <input type="text">
    </div>
    <script>
        let container = document.querySelector(".container");
        let input = document.querySelector("input");
  
        let addP = document.createElement("p");
        let removedP = document.createElement("p");
  
        input.addEventListener("focus", function(e) {
            addP.innerText = "The input element is in focus";
            container.appendChild(addP);
            input.style.border = "2px solid black";
            input.style.outline = "none";
  
        });
  
        input.addEventListener("blur", function(e) {
            container.removeChild(addP);
            removedP.textContent = "The input element is out of focus";
            container.appendChild(removedP);
  
        });
  </script>
</body>
</html>


Output:

Example 2: In this example, when the user clicks on the given link, the anchor element gets in focus and its color changes to the specified color “#C197D2” when it is in focus.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Example 2</title>
    <style>
        .container {
            background-color: green;
            height: 150px;
            width: 450px;
            font-size: 22px;
            font-weight: bolder;
            text-align: center;
            color: whitesmoke;
            margin: auto;
        }
          
        p:nth-child(2n) {
            color: black;
        }
          
        a {
            color: whitesmoke;
        }
    </style>
</head>
<body>
    <div class="container">
          
<p>GeeksforGeeks</p>
  
          
<p>Click here to visit <a href="https://www.geeksforgeeks.org/">
          GeeksforGeeks</a>website </p>
  
    </div>
    <script>
       let a = document.querySelector("a");
        a.addEventListener("focus", function(e) {
            a.style.color = "#C197D2";
        })
    </script>
</body>
</html>


Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!