删除 twitter.com 上的 J 和 K 键事件

Question

I built a browser extension that extends twitter.com. It opens a jQuery UI modal window, and has some text inputs. When I type in those inputs, it works, except for the J and K keys. Those keys are part of some custom Twitter event (scrolling between tweets). I can get all the keys to actually type the letter into the box except for those two.

I want to know how to unbind the keypress stuff for those two keys so that I can get those two letters to type. Any ideas on how to unbind them? I have tried catching the event and preventing the default on it...didn't help. I have caught it and returned true/false, also no help. Please let me know.

Answer 1

This sounds very similar to a problem I had where google would alter the up and down arrow keys. Here is where I solved it on SO after some help. Basically I stopped the event like so (for me its up and down, find the keycodes for your j and k):

if (event.keyCode == 40 || event.keyCode == 38)  {
    event.cancelBubble = true;
    event.stopPropagation();            
    return false;
}

Answer 2

Twitter appears to use jQuery for event binding. From the JavaScript console, we can inspect these events:

$(document).data('events').keydown;
$(document).data('events').keypress;
$(document).data('events').keyup;

Through basic trial and error, we can narrow our scope to the keypress event by removing these events and testing for the missing functionality.

// Results in j/k keys no longer moving up/down
$(document).data('events').keypress = [];

This of course is sort of a hack-and-slash approach, but useful for narrowing things down.

Answer 3

I ran into the same issue with textareas and input fields on Twitter.com when I built a browser extension to enhance the page. I was able to get everything to work as expected by targeting the specific input and textareas that my extension created and then stoping the propagation of the keypress event.

$("selector-for-inputs-created-by-extension")
    .bind("keypress", function(e) {
        e.stopPropagation();
    });

Hope that helps clarify things.