Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Input Color autofocus Property
The HTML DOM Input Color autofocus property sets or returns whether a color input field automatically receives focus when the page loads. When set to true, the color input will be highlighted and ready for user interaction immediately upon page load.
Syntax
Following is the syntax for returning the autofocus property value −
inputColorObject.autofocus
Following is the syntax for setting the autofocus property −
inputColorObject.autofocus = booleanValue
Parameters
The booleanValue parameter can be one of the following −
| Value | Description |
|---|---|
true |
The input color field will automatically receive focus when the page loads |
false |
The input color field will not automatically receive focus (default behavior) |
Return Value
This property returns a Boolean value indicating whether the color input has the autofocus attribute set (true) or not (false).
Example − Getting Autofocus Status
Following example demonstrates how to check if a color input has autofocus enabled −
<!DOCTYPE html>
<html>
<head>
<title>Input Color Autofocus Status</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Color Input Autofocus Property</h2>
<label for="colorPicker">Choose a color: </label>
<input type="color" id="colorPicker" autofocus value="#ff0000">
<br><br>
<button onclick="checkAutofocus()">Check Autofocus Status</button>
<p id="result"></p>
<script>
function checkAutofocus() {
var colorInput = document.getElementById("colorPicker");
var status = colorInput.autofocus;
document.getElementById("result").innerHTML = "Autofocus property: " + status;
}
</script>
</body>
</html>
The output shows the current autofocus status when the button is clicked −
Choose a color: [color picker] [Check Autofocus Status] Autofocus property: true
Example − Setting Autofocus Property
Following example shows how to dynamically enable or disable the autofocus property −
<!DOCTYPE html>
<html>
<head>
<title>Toggle Input Color Autofocus</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Toggle Color Input Autofocus</h2>
<label for="myColor">Color Picker: </label>
<input type="color" id="myColor" autofocus value="#00ff00">
<br><br>
<button onclick="toggleAutofocus()">Toggle Autofocus</button>
<div id="status" style="margin-top: 10px; font-weight: bold;"></div>
<script>
var colorInput = document.getElementById("myColor");
var statusDiv = document.getElementById("status");
// Display initial status
updateStatus();
function toggleAutofocus() {
colorInput.autofocus = !colorInput.autofocus;
updateStatus();
}
function updateStatus() {
statusDiv.innerHTML = "Autofocus: " + colorInput.autofocus;
}
</script>
</body>
</html>
Each click of the toggle button switches the autofocus property between true and false −
Color Picker: [green color picker] [Toggle Autofocus] Autofocus: false (after clicking toggle)
Example − Multiple Color Inputs
Following example demonstrates autofocus behavior with multiple color input fields −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Color Inputs</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Multiple Color Inputs</h2>
<p>Background Color: <input type="color" id="bgColor" value="#ffffff"></p>
<p>Text Color: <input type="color" id="textColor" autofocus value="#000000"></p>
<p>Border Color: <input type="color" id="borderColor" value="#cccccc"></p>
<br>
<button onclick="showAutofocusStatus()">Show Autofocus Status</button>
<div id="output" style="margin-top: 15px;"></div>
<script>
function showAutofocusStatus() {
var bgColor = document.getElementById("bgColor");
var textColor = document.getElementById("textColor");
var borderColor = document.getElementById("borderColor");
var output = document.getElementById("output");
output.innerHTML =
"Background Color autofocus: " + bgColor.autofocus + "<br>" +
"Text Color autofocus: " + textColor.autofocus + "<br>" +
"Border Color autofocus: " + borderColor.autofocus;
}
</script>
</body>
</html>
Only the text color input has autofocus enabled, so it receives focus when the page loads −
Background Color: [white color picker] Text Color: [black color picker] (focused) Border Color: [light gray color picker] Background Color autofocus: false Text Color autofocus: true Border Color autofocus: false
Key Points
Here are important considerations when using the autofocus property with color inputs −
Only one element per page should have the autofocus attribute to avoid conflicts.
The autofocus property can be set dynamically using JavaScript, but it only affects the initial page load behavior.
When autofocus is enabled on a color input, some browsers may automatically open the color picker dialog.
The property is supported in all modern browsers that support the HTML5 color input type.
Conclusion
The HTML DOM Input Color autofocus property provides control over whether a color input field automatically receives focus when the page loads. Set it to true to enable automatic focusing or false to disable it, improving user experience by directing attention to the most important input field.
165 Views
