The onblur
property of the GlobalEventHandlers
mixin is the EventHandler
for processing blur
events. It's available on Element
, Document
, and Window
.
The blur
event is raised when an element loses focus.
Note: The opposite of onblur
is onfocus
.
Syntax
target.onblur = functionRef;
Value
functionRef
is a function name or a function expression. The function receives a FocusEvent
object as its sole argument.
Example
This example uses onblur
and onfocus
to change the text within an <input>
element.
HTML
<input type="text" value="CLICK HERE">
JavaScript
let input = document.querySelector('input'); input.onblur = inputBlur; input.onfocus = inputFocus; function inputBlur() { input.value = 'Focus has been lost'; } function inputFocus() { input.value = 'Focus is here'; }
Result
Try clicking in and out of the form field, and watch its contents change accordingly.
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'onblur' in that specification. |
Living Standard |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
onblur | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
In contrast to IE, in which almost all kinds of elements receive the blur
event, only a few kinds of elements on Gecko browsers work with this event.
See also
blur
event- Related event handler:
GlobalEventHandlers.onfocus