3

I just learned about onfocusout, onfocusin but these functions do not seem to work. I tried it both with firefox and chrome. There are no console messages at all, even when i have focus and loose it. What am i doing wrong?

window.addEventListener
(
  "onfocusout",
  function()
  {
    console.log("page lost focus");
  }
);

window.addEventListener
(
  "onfocusin",
  function()
  {
    console.log("page has focus");
  }
);
<h1>Test</h1>
Black
  • 18,150
  • 39
  • 158
  • 271

3 Answers3

10

With addEventListener you do not use "on" with the event name

function example(evt) {
    console.log(evt.type, event.target.id);  
}

window.addEventListener("focusin", example);
window.addEventListener("focusout", example);
<input type="text" id="foo" />
<input type="text" id="bar" />

If you are wondering about the page state, than you need to look at different events: pageshow and pagehide

epascarello
  • 204,599
  • 20
  • 195
  • 236
3

I've done some research regarding this. And you only gain "focus" when you actually select a text field. source: w3schools

So what you're looking for is for the console to log something when you minimize the screen? or select another window? If so i found a post regarding this here

Community
  • 1
  • 1
DarkEyeDragon
  • 320
  • 5
  • 15
  • Yes exactly, i try to find a solution for doing something if i minimize the screen or select another window. – Black Apr 08 '16 at 12:20
  • 1
    You should probably read trough the post i linked then. Its a bit confusing but i'm sure you'll figure it out. In case you missed the link: [http://stackoverflow.com/questions/1060008/is-there-a-way-to-detect-if-a-browser-window-is-not-currently-active](http://stackoverflow.com/questions/1060008/is-there-a-way-to-detect-if-a-browser-window-is-not-currently-active) – DarkEyeDragon Apr 08 '16 at 12:38
-1

Just use the below code snippet, it's easier to read but does the same as event handlers :-)

$(function(){
  $('.yourfocuselement').focus(function(){
      //The code for element focus goes here
    })
    $('.yourfocuselement').blur(function(){
      //The code for element lose focus goes here
    })
})

Also I may not know your full requirements from this code, but I don't see why you would need to add a listener for the page focus...

TechnicalTophat
  • 1,655
  • 1
  • 15
  • 37
  • I try to do something if the user minimize the page – Black Apr 08 '16 at 12:23
  • 1
    @EdwardBlack just replace the `'.yourfocuselement'` with `window` then – TechnicalTophat Apr 08 '16 at 12:26
  • @EdwardBlack also you should note that in IE the window.focus event fires on page load – TechnicalTophat Apr 08 '16 at 12:27
  • The first line is a bit misleading, what jquery does is bind event handlers to the events on those elements, resulting in the same behavior. It's misleading to draw a line between the two, since they're functionally the same. http://stackoverflow.com/a/7507402/2748503 – Redmega Apr 08 '16 at 12:34
  • @AngelJosephPiscola Updated my answer, it's personal preference really, I've always done it this way – TechnicalTophat Apr 08 '16 at 12:37
  • @Anonymouse No, I agree, it's easier to use jquery and it's my preferred method as well, but they're identical in function and the OP did not add the jquery tag. – Redmega Apr 08 '16 at 12:41
  • @AngelJosephPiscola Well I agree that my answer was misleading, and I apologise for that. I've now updated it, and if anything else needs improving please don't hesitate to tell me. Also, I'm slightly unsure as to the meaning of 'OP'. Please could you expand on this? Thanks. – TechnicalTophat Apr 08 '16 at 12:43
  • OP stands for "Original Poster". In this case I'm referring to the asker of the question. And, not to be pedantic, but the events he was asking about were `focusin` and `focusout`, which are different from the `focus` and `blur` events. But that particular distinction is irrelevant for the answer :) http://stackoverflow.com/a/8973560/2748503 – Redmega Apr 08 '16 at 12:45
  • @AngelJosephPiscola I think developers should change their job title to 'pedantic' :-). I'm exactly the same. And thanks for the clarification on OP. – TechnicalTophat Apr 08 '16 at 13:01