JavaScript focus

JavascriptWeb DevelopmentObject Oriented Programming

The JavaScript focus() method is used for focusing on an element only if the element can be focused.

Following is the code for the JavaScript Focus() Method −

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;
   }
   .sample {
      font-size: 18px;
      font-weight: 500;
   }
</style>
</head>
<body>
<h1>JavaScript focus()</h1>
<input type="text" class="sample"></input>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above buttons to focus the input field
</h3>
<script>
   let sampleEle = document.querySelector(".sample");
   document.querySelector(".Btn").addEventListener("click", () => {
      sampleEle.focus();
   });
</script>
</body>
</html>

Output

On clicking the “CLICK HERE” button −


raja
Published on 07-May-2020 18:31:51
Advertisements