HTML onfocus Attribute

Introduction

The onfocus attribute is an inline event handler that runs JavaScript when the focus event fires. That happens when a focusable element receives focus — by mouse click, tap, or keyboard Tab. Common targets include <input>, <textarea>, <select>, <button>, and links. Use it to highlight the active field, show helper text, or prepare validation UI. Pair it with onblur for enter-and-leave flows. The focus event does not bubble; use focusin for delegation on a parent.

What You’ll Learn

Purpose of onfocus Attribute

The primary purpose of onfocus is to respond when a user starts interacting with a control. You might highlight the active input, reveal formatting hints, or fetch suggestions for an autocomplete field. Because focus also moves via keyboard, onfocus helps keyboard users get the same feedback as mouse users.

Keep handlers lightweight — heavy work on every focus can feel sluggish. For validation, many apps validate on blur (leave) rather than on every focus, but showing hints on focus is a common pattern.

📝 Syntax

Set onfocus on a focusable element, or assign element.onfocus:

<script>
  function highlightInput(el) {
    el.style.outline = "2px solid #2563eb";
  }
</script>

<input type="text" id="name" onfocus="highlightInput(this)">

Syntax Rules

• Value is JavaScript executed when the focus event fires.
• Works on focusable elements: input, textarea, select, button, a[href], [tabindex].
• Triggered by click, tap, Tab, or programmatic element.focus().
• JavaScript: element.onfocus = function() { … }.
• Modern alternative: element.addEventListener("focus", handler).
• focus does not bubble — use focusin for parent delegation.

💎 Values

The onfocus attribute accepts a string of JavaScript code:

• onfocus="highlightInput()" — Call a named function.
• onfocus="showHint()" — Inline statement.
• JavaScript: field.onfocus = () => { … } assigns the handler.

const email = document.getElementById("email");

email.addEventListener("focus", () => {
  document.getElementById("email-hint").hidden = false;
});

email.addEventListener("blur", () => {
  document.getElementById("email-hint").hidden = true;
});

Applicable Elements

onfocus vs onblur vs onclick

Examples Gallery

Inline highlight on focus, addEventListener, and pairing with onblur.

<input type="text" id="myInput" onfocus="highlightInput()">

<script>
  function highlightInput() {
    document.getElementById("myInput").style.border = "2px solid #2563eb";
  }
</script>

<script>
  document.getElementById("dynamicInput").addEventListener("focus", function () {
    console.log("Input is in focus!");
  });

  // Or property form:
  document.getElementById("dynamicInput").onfocus = function () { /* … */ };
</script>

const field = document.getElementById("email");
const hint = document.getElementById("email-hint");

field.addEventListener("focus", () => {
  hint.hidden = false;
});

field.addEventListener("blur", () => {
  hint.hidden = true;
});

♿ Accessibility

• Prefer CSS :focus-visible — Show focus rings for keyboard users without noisy outlines on every click.
• Do not remove focus outlines — If you restyle focus, ensure a visible indicator remains.
• Avoid alert() on focus — Blocking dialogs on focus harm keyboard and screen reader users.
• Associate labels — Use <label for> so focus moves predictably when the label is clicked.
• Logical tab order — Avoid positive tabindex values that confuse navigation.

💡 Best Practices