Detecting a keypress on a paper

784 Views Asked by At

I have a diagram that looks great and wanted to add a zoom in and out capability bound to the "+" and "-" keys. I added a keydown event handler to the <div> that is the container for the paper but that isn't being triggered with keypresses. This makes me think that my recipe is wrong. Has anyone tried to capture key strokes within a diagram and have a recipe to share?

The code that I tried was:

$(paperContainer).keydown(function(event) {
    console.log("Key press: %O", event);
});

where paperContainer is the jQuery object for my <div> that is correctly showing the diagram. The paperContainer was created with:

var paperContainer = $("<div style='width: 100%; height: 100%; overflow: auto;'>");
2

There are 2 best solutions below

0
On BEST ANSWER

I solved it by adding the event listener on the document:

$(document).on('keydown',function(){//your implementation})
7
On

From what it looks like, I'm not sure if you're properly attaching to the Div element. Try $(".paperContainer") if it's a class, otherwise $("#paperContainer") to grab the div if has an ID.

If that doesn't work, check things out in chrome, and jump into the console.