HTML | DOM Input Date autofocus Property

Last Updated : 31 Aug, 2022

The Date autofocus property is used for setting or returning whether a date field should automatically get focus when the page gets loaded, or not.
It returns true if the date field automatically gets focus on the loading of the page, else it returns false.
The HTML autofocus attribute is reflected by the Date autofocus property.
Syntax:

For returning the autofocus property:

dateObject.autofocus

For setting the autofocus property:

dateObject.autofocus = true|false

Property Value:

true|false : It is used to specify whether a date field should get focus when the page loads, or not. It is false by default.

Return Values: It returns a Boolean value which represents that the input date field get focus or not.

The below program illustrates the Date autofocus property :
Finding out if a date field automatically gets focus upon page loading.
Example-1:

html

<!DOCTYPE html>
<html>
 
<head>
    <title>Input Date autofocus Property in HTML</title>
    <style>
        h1 {
            color: green;
        }
         
        h2 {
            font-family: Impact;
        }
         
        body {
            text-align: center;
        }
    </style>
</head>
 
<body>
 
    <h1>GeeksforGeeks</h1>
    <h2>Input Date autofocus Property</h2>
    <br>
 
    <input type="date" id="test_Date" autofocus>
 
<p>To find out whether the date field automatically gets
      focus on page load or not, double click the "Check" button.</p>
 
    <button ondblclick="My_Date()">Check</button>
 
    <p id="test"></p>
 
    <script>
        function My_Date() { 
         // Return Input date autofocus Property
            var d = document.getElementById("test_Date").autofocus;
            document.getElementById("test").innerHTML = d;
        }
    </script>
 
</body>
 
</html>

Output:
Before:

After clicking the button:

Example-2: Below code sets the autofocus property.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM Input Date autofocus Property
    </title>
     
    <style>
        h1 {
            color: green;
        }
         
        h2 {
            font-family: Impact;
        }
         
        body {
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
     
    <h2>
        HTML DOM Input Date autofocus Property
    </h2>
 
    <input type="date"
        id="test" autofocus>
 
     
 
 
 
<p>Double Click to set the autofocus Property.</p>
 
 
 
 
 
    <button ondblclick="Access()">set autofocus</button>
 
    <p id="check"></p>
 
 
 
 
 
    <script>
        function Access() {
             
            // Accessing input element type date
            var a = document.getElementById(
                    "test").autofocus = "false";
             
            document.getElementById(
                    "check").innerHTML = a;
        }
    </script>
 
</body>
 
</html>