how to disable keyboard events on an input text box in javascript

Question

I have an image, and I use keyboards to apply some manipulations on it (translation, zoom ..). Above the image, I have an input text box which shows the number of the image in the data set. How can I disable the image manipulation when the cursor is on the text box? (ie disable the behavior that I assigned to each keyboard). I would also like to still be able to edit the text box(to move to image number xx for example). From what I read here IPad Disable keyevent on input, I think the solution would be something like this:

 // input text field
   var currentPosDisplay = $('<input type=text id="currentPos"  onkeypress="return  disableManipulation();" value="1" style="display:inline" >');

But I don't know how to implement disableManipulation() so that when I press on a key board (inside the text box), only the default behavior occurs (and not the image manipulation)

Solution 1

It sounds like you want to let the user change the value in the input, but you don't want those events to be seen at the document (or some other container) level, where you've hooked the keyboard events for image manipulation.

If that's the case, you can do that with Event#stopPropagation:

var currentPosDisplay = $('<input type=text id="currentPos" value="1" style="display:inline" >');
currentPosDisplay.on("keypress keydown keyup", function(e) {
    e.stopPropagation();
});

Solution 2

You could check if the input element has focus: How do I find out which DOM element has the focus?

And if it does, don't apply your image manipulation.

Returning false from the onkeypress handler will ignore the key that was pressed, but if you have focus it sounds like you don't want that anyway.