Which event will be triggered when element get focused in HTML ?
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>
GeeksforGeeks</a>website </p>
</div>
<script>
let a = document.querySelector("a");
a.addEventListener("focus", function(e) {
a.style.color = "#C197D2";
})
</script>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...