css - how to disable keyboard events on an input text box in javascript - Stack Overflow

admin管理员组

文章数量:1342902

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)

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)

• javascript
• css
• input
• keyboard

Share Follow edited May 23, 2017 at 12:08 CommunityBot 111 silver badge asked Sep 6, 2013 at 14:19 user1499220user1499220 41944 gold badges1313 silver badges2323 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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

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.

本文标签： csshow to disable keyboard events on an input text box in javascriptStack Overflow