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
Execute a script when the element gets focus in HTML?
The onfocus attribute in HTML executes a JavaScript function when an element receives focus. Focus occurs when a user clicks on an input field, tabs to it using the keyboard, or programmatically selects it. This attribute is commonly used with form elements like input fields, text areas, and select dropdowns.
Syntax
Following is the syntax for the onfocus attribute −
<element onfocus="JavaScript function">
The onfocus attribute accepts a JavaScript function call or inline JavaScript code that executes when the element gains focus.
Example − Input Field Focus
Following example demonstrates how to change the background color of an input field when it receives focus −
<!DOCTYPE html>
<html>
<head>
<title>Onfocus Attribute Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<p>Enter subject name below:</p>
Subject: <input type="text" id="sname" onfocus="display(this.id)">
<br><br>
<p>Click on the input field to see the background change.</p>
<script>
function display(val) {
document.getElementById(val).style.background = "lightblue";
document.getElementById(val).style.padding = "5px";
}
</script>
</body>
</html>
When you click on or tab to the input field, it gains focus and the background changes to light blue with padding −
Enter subject name below: Subject: [Input field changes to light blue background when focused] Click on the input field to see the background change.
Example − Multiple Input Fields
Following example shows the onfocus attribute used with multiple form elements −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Input Focus</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Registration Form</h2>
<form>
<label>Name: </label>
<input type="text" id="name" onfocus="highlightField(this)" placeholder="Enter your name"><br><br>
<label>Email: </label>
<input type="email" id="email" onfocus="highlightField(this)" placeholder="Enter your email"><br><br>
<label>Phone: </label>
<input type="tel" id="phone" onfocus="highlightField(this)" placeholder="Enter your phone"><br><br>
<p id="message">Click on any field to see focus indication.</p>
</form>
<script>
function highlightField(element) {
element.style.backgroundColor = "#ffffcc";
element.style.border = "2px solid #4CAF50";
document.getElementById("message").innerText = "Field '" + element.placeholder + "' is now focused!";
}
</script>
</body>
</html>
Each input field gets highlighted with a yellow background and green border when focused, and a message displays which field is active.
Registration Form Name: [Input field highlighted when focused] Email: [Input field highlighted when focused] Phone: [Input field highlighted when focused] Field 'Enter your name' is now focused! (message updates based on focused field)
Example − Text Area and Select Elements
The onfocus attribute also works with other form elements like text areas and select dropdowns −
<!DOCTYPE html>
<html>
<head>
<title>Onfocus with Different Elements</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Focus Events on Different Elements</h2>
<label>Comments:</label><br>
<textarea id="comments" rows="4" cols="50" onfocus="showFocus('Textarea')" placeholder="Enter your comments"></textarea><br><br>
<label>Country:</label>
<select id="country" onfocus="showFocus('Select dropdown')">
<option value="">Choose a country</option>
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
<option value="ca">Canada</option>
</select><br><br>
<p id="focusMessage">Focus on any element above to see the message.</p>
<script>
function showFocus(elementType) {
document.getElementById("focusMessage").innerText = elementType + " has received focus!";
document.getElementById("focusMessage").style.color = "#e67e22";
document.getElementById("focusMessage").style.fontWeight = "bold";
}
</script>
</body>
</html>
When you focus on the textarea or select dropdown, the message updates to show which element type received focus.
Focus Events on Different Elements Comments: [Textarea highlighted when focused] Country: [Choose a country ?] Textarea has received focus! (message in orange, bold text)
Common Use Cases
The onfocus attribute is commonly used for the following purposes −
-
Form validation − Highlight required fields or show validation messages when users focus on input elements.
-
User guidance − Display helpful tooltips or instructions when users focus on specific form fields.
-
Visual feedback − Change styling (background color, border, etc.) to indicate which field is currently active.
-
Accessibility improvement − Enhance keyboard navigation experience by providing clear focus indicators.
Conclusion
The onfocus attribute provides an easy way to execute JavaScript when HTML elements gain focus. It enhances user experience by providing immediate visual feedback and can be used with various form elements including input fields, text areas, and select dropdowns. This attribute is particularly useful for form validation, user guidance, and accessibility improvements.
368 Views
