HTML DOM Input Checkbox autofocus Property

HTMLWeb DevelopmentFront End Technology

The HTML DOM Input Checkbox autofocus property returns and modify the value of autofocus attribute of an input HTML element with type=”checkbox”.

Syntax

Following is the syntax −

1. Returning autofocus

object.autofocus

2. Modifying autofocus

object.autofocus = true|false

Example

Let us see an example of autofocus property −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<title<HTML DOM autofocus property</title<
<style>
   body{
      text-align:center;
   }
   p{
      font-size:1.5rem;
      color:#ff8741;
   }
   input{
      width:30px;
      height:30px;
      outline:2px solid #db133a;
   }
   button{
      background-color:#db133a;
      color:#fff;
      padding:8px;
      border:none;
      width:120px;
      margin:0.5rem;
      border-radius:50px;
      outline:none;
   }
</style>
</head>
<body>
<h1>autofocus Property Example</h1>
<p>Do you need help?</p>
<input type="checkbox" autofocus>
<br>
<button onclick="yes()">Yes</button>
<button onclick="no()">No</button>
<script>
   function yes() {
      document.querySelector("input").checked = true;
   }
   function no() {
      document.querySelector("input").checked = false;
   }
</script>
</body>
</html>

Output

This will produce the following output −

Click on “Yes/No” button to check and uncheck the checkbox but as you can see the checkbox already gets autofocus when page load with red outline.



raja
Published on 16-Jul-2019 16:32:37
Advertisements