ContentEditable element does not react on hotkeys

Question

I'm developing a Chrome extension that injects JS code into all opened tabs. The task of this code includes displaying a textbox, implemented as a contentEditable <div> to allow formatting. However, the contentEditable element doesn't play well with some websites, e.g. Twitter.

Try it yourself:

1. Go to twitter.com
2. Paste javascript:document.body.setAttribute('contentEditable', true); in the address bar and hit enter.
3. Click anywhere in the document - you should now be able to edit the text.
4. Try typing a j or k. You will see: The character does not appear, instead, the selection is moved (a tweet in the list will be highlighted).

I have tried hard to find out how Twitter's keyboard navigation is implemented, but could not find any hints. Can you give me any tips on how to solve this problem (and avoid similar problems on other websites)?

Using an iFrame for the input triggers some other, very weird bugs, so I want to avoid that if it's possible.

Answer 1

Please make sure you don't have installed vim keyboard extension on google chrome. J and K are then used for navigation shortcuts. (up/down).