HTML onblur Event Attribute

Description

The event attribute onblur allows you to set the script to fire when an element loses focus.

Syntax

<element onblur="script">

Values

  • scriptThe name of the script to use when the event has been triggered.

Example

<!DOCTYPE html> 
  <html> 
    <head>
      <title>onblur event</title> 
    </head> 
    <body> 
    <p>Click on the field, and then next to it. When you click on an element, due to the onfocus event attribute, the script is triggered when the element receives focus, and thanks to the onblur event attribute, the script is launched when the focus is lost.</p> 
    <input type="text" name="testInput" id="testInput" onblur="blurFunction()" onfocus="focusFunction()"> 
<script> 
function blurFunction() { 
  document.getElementById("testInput").style.background="khaki"; 
} 
function focusFunction() { 
  document.getElementById("testInput").style.background="red"; 
} 
</script> 
  </body> 
</html>

Supported Tags

All HTML elements except:
<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> and <title>

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
YesYesYesYesYesYes
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
YesYesYesYesYesYes