HTML Code

<!DOCTYPE html>



<html lang=en>



<head>



  <meta charset=UTF-8>



  <meta name=viewport content="width=device-width,initial-scale=1">



  <title>onblur — with onfocus</title>



  <style>body{font-family:system-ui,sans-serif;margin:0;padding:1.5rem;background:#f8fafc;color:#334155;line-height:1.7}h1{margin:0 0 .75rem;font-size:1.25rem;color:#0f172a}label{display:block;font-weight:600;margin-bottom:.35rem}input{width:100%;max-width:320px;padding:.5rem;font:inherit;border:2px solid #cbd5e1;border-radius:6px;transition:border-color .15s}input.is-focused{border-color:#2563eb}input.is-invalid{border-color:#dc2626}.hint{margin-top:.75rem;font-size:.8125rem;color:#64748b;max-width:320px}code{background:#e2e8f0;padding:.1rem .35rem;border-radius:4px}</style>



</head>



<body>



  <h1>onfocus + onblur</h1>



  <p>Common pattern: style on focus, validate when the user leaves the field.</p>



  <label for=username>Username (min 3 chars)</label>



  <input id=username placeholder="Focus me, then tab away">



  <p class=hint id=hint>Focus highlights the border; blur checks length.</p>





  <script>var field=document.getElementById("username"),hint=document.getElementById("hint");field.addEventListener("focus",(function(){field.classList.add("is-focused"),field.classList.remove("is-invalid"),hint.textContent="Focused — type at least 3 characters."})),field.addEventListener("blur",(function(){field.classList.remove("is-focused");var e=field.value.trim().length>=3;field.classList.toggle("is-invalid",!e),hint.textContent=e?"blur: username looks good.":"blur: username must be at least 3 characters."}))</script>



</body>



</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

HTML onblur Attribute — Pair with onfocus