How to disable input to Phaser when someone is typing somewhere else on the page (Not the canvas)

[Ralph]

Basically, I have my Phaser canvas which takes up 80% of my page and the other 80% is a chat bar on the side. My issue is, my game uses WASD controls and some other buttons to open menus. When someone goes to type in the chat box to send a message, phaser also takes the input. So if im typing a message with a bunch of W's in it, my character in the game would be moving forward. Anyone know a way around this, and not using WASD isnt an option in my case! Thanks for the help in advanced!

[megmut]

Okay, a solution that may work, if you listen for the focus change on your canvas, dispatch an event that the game listens out for to pause the game state. Something like...

-- in your html --

document.querySelector("canvas").onblur = function() {
    // canvas has lost focus
    window.dispatchEvent(new CustomEvent('pauseGame', {detail: 'myParams'}));
}

document.querySelector("canvas").onfocus = function() {
    // canvas has lost focus
    window.dispatchEvent(new CustomEvent('unPause', {detail: 'myParams'}));
}

-- in the game --

window.addEventListener('pauseGame', function(e) {
    // pause the game
});

window.addEventListener('unPause', function(e) {
    // user has clicked on the canvas, unpause the game
});

Hope this helps!

[Ralph]

On 6/20/2016 at 8:50 AM, megmut said:

Okay, a solution that may work, if you listen for the focus change on your canvas, dispatch an event that the game listens out for to pause the game state. Something like...

-- in your html --

document.querySelector("canvas").onblur = function() {
    // canvas has lost focus
    window.dispatchEvent(new CustomEvent('pauseGame', {detail: 'myParams'}));
}

document.querySelector("canvas").onfocus = function() {
    // canvas has lost focus
    window.dispatchEvent(new CustomEvent('unPause', {detail: 'myParams'}));
}

-- in the game --

window.addEventListener('pauseGame', function(e) {
    // pause the game
});

window.addEventListener('unPause', function(e) {
    // user has clicked on the canvas, unpause the game
});

Hope this helps!

The idea is there and i see how it works! However, it always throws an error: "Cannot set property 'onblur' of null" no matter where in my HTML i place the top part of the code, below the canvas or above. I tried to setup a div around my game code then run it off of that, but i couldnt size the div correctly through javascript. Does that make sense? 

[Ralph]

Answered: 

 

within update func

    if (game.input.activePointer.withinGame){
        game.input.enabled = true;
    } else {
        game.input.enabled = false;
    }