Fricken Hamster Posted January 21, 2016 Share Posted January 21, 2016 Hey, So usually people recommend just using a keyboard listener on window or document for dealing with keyboard input. This however has the problem of firing the event anywhere on the dom. It seems like this could be fixed by setting a tabIndex for the canvas element, making it focusable, and then adding a event directly on the canvas, but the PIXI canvas doesn't seem receptive to tabindex or anyway to make it focusable. Furthermore, if there is another element on the dom, such as an input, clicking on the PIXI canvas won't blur other elements. Is there a way to fix this, make the canvas focussable? Thanks Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted January 21, 2016 Share Posted January 21, 2016 Assign some tabIndex to canvas to make it focusable. https://ga.me/ does that, and they also blur canvas and show "please click/focus here" sign when canvas isnt focused. In most cases I just add "onfocus" and "onblur" events to elements to temporary "lock" my global onkeydown/onkeyup. Quote Link to comment Share on other sites More sharing options...
Fricken Hamster Posted January 22, 2016 Author Share Posted January 22, 2016 1 minute ago, ivan.popelyshev said: Assign some tabIndex to canvas to make it focusable. https://ga.me/ does that, and they also blur canvas and show "please click/focus here" sign when canvas isnt focused. In most cases I just add "onfocus" and "onblur" events to elements to temporary "lock" my global onkeydown/onkeyup. Thanks for the response. Is there some specific way you are setting tabIndex? I am currently just putting a class on the canvas, and then using jquery.attr to set tabindex to 0 It doesnt seem to be working Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted January 22, 2016 Share Posted January 22, 2016 1) Ellements with tabIndex > 0 are focusable 2) To focus element you have to click on it or call focus() method. Quote Link to comment Share on other sites More sharing options...
Fricken Hamster Posted January 22, 2016 Author Share Posted January 22, 2016 Hey, I still don't seem to have a focusable canvas. I made a jsfiddle that captures the essence of what I am doing. Could you take a look?https://jsfiddle.net/fenrtk3b/ Thanks Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted January 22, 2016 Share Posted January 22, 2016 https://jsfiddle.net/fenrtk3b/3/ - IT WORKS! So, correct answer: 1) set any tabindex (0, -1 , anything goes) 2) set focus() programatically, for example on click Quote Link to comment Share on other sites More sharing options...
Fricken Hamster Posted January 22, 2016 Author Share Posted January 22, 2016 Ahh! Thank you. I thought the 2 steps you had before were 2 options of focusing. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.