remove J and K key events on twitter.com

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.

Check out `phoenix.bundle.js`, it appears to do the binding you're talking about. Maybe find out what functions it's binding and either overwrite them or reference them to detach the triggers. — Brad Christie, May 23 '11 at 18:08

score 4 · Answer 1 · edited May 23 '17 at 12:04

4

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

edited May 23 '17 at 12:04

Community

1
1

answered May 23 '11 at 18:35

mrtsherman

39,342
23
87
111

score 3 · Answer 2 · answered May 23 '11 at 18:32

3

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.

answered May 23 '11 at 18:32

Matt

41,216
30
109
147

SO this keypress array has three events in it. Setting any of them to null fixes the page. – frosty May 24 '11 at 06:10
@aaronfrost I imagine that not all three are involved in this behavior, but that by setting one to null you are creating an exception in the event handling code that results in most/all of them not firing (and therefore the one of interest not firing) – Matt May 25 '11 at 14:26

score 1 · Accepted Answer · answered Dec 20 '11 at 00:31

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.

remove J and K key events on twitter.com

3 Answers3