Skip to content
Related Articles

Related Articles

Improve Article
HTML | DOM Input Date autofocus Property
  • Last Updated : 21 Jun, 2021

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.

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() {
            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 value
            var a = document.getElementById(
                    "test").autofocus = "false";
             
            document.getElementById(
                    "check").innerHTML = a;
        }
    </script>
 
</body>
 
</html>

Output:

Before:

After clicking the button:

Supported Web Browsers: 

  • Apple Safari
  • Internet Explorer
  • Firefox
  • Google Chrome
  • Opera



My Personal Notes arrow_drop_up
Recommended Articles
Page :