Skip to content
Related Articles

Related Articles

Improve Article
HTML | DOM Input Datetime autofocus Property
  • Last Updated : 08 Jun, 2021

The Datetime autofocus property is used to set or return the autofocus of Datetime field. The Datetime autofocus property returns true if the datetime field automatically gets focus when the page loads, else it returns false. 
The HTML autofocus attribute is reflected by the Datetime autofocus property.
Syntax: 
 

  • Returning the autofocus property: 
     
datetimeObject.autofocus
  • Setting the autofocus property: 
datetimeObject.autofocus = true|false

Property Value: 
 

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

Below program illustrates the Datetime autofocus property: 
Example: Finding out if a DateTime field automatically gets focus upon page load. 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
      Input Datetime 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 Datetime autofocus Property</h2>
    <br>
 
    <input type="datetime"
           id="test_Datetime"
           autofocus>
 
     
<p>To find out whether the date time field automatically
      gets focus on page load or not,
      double click the "Check" button.</p>
 
 
    <button ondblclick="My_Datetime()">
      Check
  </button>
 
    <p id="test">
  </p>
 
 
    <script>
        function My_Datetime() {
           
            // Return the Datetime autofocus
            // property Value.
            var d =
             document.getElementById(
              "test_Datetime").autofocus;
           
            document.getElementById("test").innerHTML = d;
        }
    </script>
 
</body>
 
</html>

Output: 
Before:



After:
 

Example-2: Below code sets the autofocus property. 

HTML




                        <!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM Input Datetime 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 Datetime autofocus Property
    </h2>
 
    <input type="datetime"
        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:

Supported Browsers: 
 

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

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :