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

css, input, javascript, keyboard

Solution

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();
});

Problem

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)

Original source

Related problems