The onblur property returns the onBlur event handler code, if any, that exists on the current element.
Syntax
element.onblur = function;
function
is the name of a user-defined function, without the () suffix or any parameters, or an anonymous function declaration, such as
element.onblur = function() { console.log("onblur event detected!"); };
Example
<html> <head> <title>onblur event example</title> <script type="text/javascript"> var elem = null; function initElement() { elem = document.getElementById("foo"); // NOTE: doEvent(); or doEvent(param); will NOT work here. // Must be a reference to a function name, not a function call. elem.onblur = doEvent; }; function doEvent() { elem.value = 'Bye-Bye'; console.log("onblur Event detected!") } </script> <style type="text/css"> <!-- #foo { border: solid blue 2px; } --> </style> </head> <body onload="initElement();"> <form> <input type="text" id="foo" value="Hello!" /> </form> <p>Click on the above element to give it focus, then click outside the element.<br /> Reload the page from the NavBar.</p> </body> </html>
Notes
The blur event is raised when an element loses focus.
In contrast to MSIE--in which almost all kinds of elements receive the blur event--almost all kinds of elements on Gecko browsers do NOT work with this event.
Specifications
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard The definition of 'onblur' in that specification. |
Living Standard |