HTML onfocus Event Attribute

HTML Web Development Front End Technology

The HTML onfocus event attribute is used when an HTML element gets focus in an HTML document.

Syntax

Following is the syntax −

<tagname onfocus=”script”></tagname>

Example

Let us see an example of HTML onfocus event Attribute −

Live Demo

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   body {
      color: #000;
      height: 100vh;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
      text-align: center;
      padding: 20px;
   }
   textarea {
      border: 2px solid #fff;
      background: transparent;
      font-size: 1rem;
   }
   ::placeholder {
      color: #000;
      font-size: 1rem;
   }
</style>
</head>
<body>
<h1>HTML onfocus Event Attribute Demo</h1>
<textarea placeholder="Enter your message here" onfocus="focusFn()" rows='8' cols="50"></textarea>
<script>
   function focusFn() {
      document.querySelector('textarea').style.background = '#ffffff36';
   }
</script>
</body>
</html>