Showing Help Text with Focus and Blur Events
Contextual help can appear when a text field receives focus and disappear when focus leaves it. The original example uses three fields—User ID, Password and Name—with a separate help message for each one. That behavior is preserved.
See focus events, show/hide layers, and the HTML div element.
Modern Focus and Blur Example Top ↑
The event handlers are registered with addEventListener(), and aria-describedby connects each field to its help text for assistive technology.
const helpByField = {
userid: document.getElementById("help-userid"),
password: document.getElementById("help-password"),
fullname: document.getElementById("help-fullname")
};
for (const input of document.querySelectorAll("[data-help]")) {
const help = helpByField[input.dataset.help];
input.addEventListener("focus", () => { help.hidden = false; });
input.addEventListener("blur", () => { help.hidden = true; });
}
<form>
<label>User ID <input type="text" data-help="userid" aria-describedby="help-userid"></label>
<label>Password <input type="password" data-help="password" aria-describedby="help-password"></label>
<label>Name <input type="text" data-help="fullname" aria-describedby="help-fullname"></label>
</form>
<div id="help-userid" class="field-help" hidden>Your Userid</div>
<div id="help-password" class="field-help" hidden>Your Password</div>
<div id="help-fullname" class="field-help" hidden>Your full name</div>
.field-help {
margin: .25rem 0 .75rem;
max-width: 220px;
padding: .5rem;
background: #f1f1f1;
color: #000;
border: 2px dashed #0000cc;
}
Complete Working Page Top ↑
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Field help on focus</title><style>.field-help {
margin: .25rem 0 .75rem;
max-width: 220px;
padding: .5rem;
background: #f1f1f1;
color: #000;
border: 2px dashed #0000cc;
}</style></head>
<body>
<form>
<label>User ID <input type="text" data-help="userid" aria-describedby="help-userid"></label>
<label>Password <input type="password" data-help="password" aria-describedby="help-password"></label>
<label>Name <input type="text" data-help="fullname" aria-describedby="help-fullname"></label>
</form>
<div id="help-userid" class="field-help" hidden>Your Userid</div>
<div id="help-password" class="field-help" hidden>Your Password</div>
<div id="help-fullname" class="field-help" hidden>Your full name</div>
<script>const helpByField = {
userid: document.getElementById("help-userid"),
password: document.getElementById("help-password"),
fullname: document.getElementById("help-fullname")
};
for (const input of document.querySelectorAll("[data-help]")) {
const help = helpByField[input.dataset.help];
input.addEventListener("focus", () => { help.hidden = false; });
input.addEventListener("blur", () => { help.hidden = true; });
}</script>
</body></html>
Event Handling onMouseOver and onMouseOut
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
Subscribe to our YouTube Channel here
