onfocusin event
Examples
JavaScript is executed when the input field (input) is about to get focus:
try it"
The bottom of this section there are many more examples.
Definition and Usage
onfocusin event is triggered when an element is about focus.
Tip: onfocusin events similar to the onfocus event. The main difference is that does not support onfocus event bubbling. So, if you want to know whether the element or its child elements get focus required onfocusin event.
Tip: Although Firefox browser does not support onfocusin 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 gets focus.
Tip: Instead event onfocusin event is onfocusout event.
Browser Support
| event | |||||
|---|---|---|---|---|---|
| onfocusin | 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
Used in conjunction with "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 focusin 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"