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. It is false by default.
Return Values: It returns a Boolean value which specify that the Datetime field is autofocus or not.
Below program illustrates the Datetime autofocus property:
Example: Finding out if a DateTime field automatically gets focus upon page load.
<!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.
<!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 "Datetime"
var a = document.getElementById(
"test").autofocus = "false";
document.getElementById(
"check").innerHTML = a;
}
</script>
</body>
</html>
|
Output:
Before:
After:
Note: The <input type=”datetime”> element does not show any datetime field/calendar in any major browsers, except Safari.
Supported Browsers :
- Apple Safari
- Internet Explorer
- Firefox
- Google Chrome
- Opera