Jump to content

focus and keyboard context


Fricken Hamster
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 :(

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...