onfocusout event
Examples
Execute JavaScript when the input upcoming input box loses focus:
try it"
The bottom section contains more instances.
Definition and Usage
onfocusout upcoming event is triggered when the element loses focus.
Tip: onfocusout events similar to the onblur event. The main difference is that the onblur event does not support bubbling. So, if you need to see whether the element or sub-element gets the focus, you need to use onfocusout event.
Tip: Although Firefox does not support onfocusout events, but you can use the onfocus (using the addEventListener () method is an optional parameter useCapture) capture monitor events to see whether the element or sub-element loses focus.
Tip: Instead event onfocusout event is onfocusin event.
Browser Support
| event | |||||
|---|---|---|---|---|---|
| onfocusout | Yes | Yes | not support | Yes | Yes |
Note: Use the HTML DOM syntax in Chrome, Safari and Opera 15+ browsers onfocusin events may not work correctly. However, he as an HTML element by using the addEventListener () method can work.
grammar
In HTML:
JavaScript (Chrome, Safari and Opera 15+ may not work properly) in:
JavaScript, use the addEventListener () method:
Note: Internet Explorer 8 and earlier versions of IE do not support addEventListener () method.
technical details
| Whether to support the bubble: | Yes |
|---|---|
| It can be canceled: | No |
| Event Type: | FocusEvent |
| Supported HTML tags: | All HTML elements except: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> |
More examples
Examples
Use "onfocusin" and "onfocusout" event:
try it"
Examples
Event delegates: Set addEventListener () The useCapture parameter is true (for focus and get lost focus):
<Input type = "text" id = "myInput">
</ Form>
<Script>
var x = document.getElementById ( "myForm");
x.addEventListener ( "focus", myFocusFunction, true);
x.addEventListener ( "blur", myBlurFunction, true);
function myFocusFunction () {
. Document.getElementById ( "myInput") style.backgroundColor = "yellow";
}
function myBlurFunction () {
document.getElementById ( "myInput") style.backgroundColor = "".;
}
</ Script>
try it"
Examples
Event delegates: Use focusout event (Firefox browser does not support):
<Input type = "text" id = "myInput">
</ Form>
<Script>
var x = document.getElementById ( "myForm");
x.addEventListener ( "focusin", myFocusFunction);
x.addEventListener ( "focusout", myBlurFunction);
function myFocusFunction () {
. Document.getElementById ( "myInput") style.backgroundColor = "yellow";
}
function myBlurFunction () {
document.getElementById ( "myInput") style.backgroundColor = "".;
}
</ Script>
try it"