Explain focus events in JavaScript.

Javascript Web Development Object Oriented Programming

The focus event is fired when an element either gets or loses focus. Following are the focus events −

Event	Description
Blur	This event is fired when an element loses focus.
Focus	This event is fired when the element gets the focus.
focusin	This event is fired when the element is about to get focus.
ocusout	This event is fired when an element is about to lose focus.

Following is the code for focus events in JavaScript −

Example

Live Demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   input {
      padding: 10px;
   }
</style>
</head>
<body>
<h1>Focus events in Javascript</h1>
<form id="form">
<input type="text" placeholder="Username" />
<input class="passW" type="password" placeholder="Password" />
</form>
<h3>Focus on the above password input box to change its background color</h3>
<script>
   let passEle = document.querySelector(".passW");
   passEle.addEventListener("focus", () => {
      passEle.style.backgroundColor = "#90EE90";
   });
</script>
</body>
</html>

Output

On focusing on the password field −

AmitDiwan

Published on 16-Jul-2020 13:21:10

Previous Page Print Page