3

Is it possible to simulate the arrow keys on a content editable div? I tried to fire "key press" events but it seems that contenteditable ignores them. (I just need a webkit/safari solution)

I just need to move the caret inside the div like the arrow keys do but programatically.

Perhaps the Rangy library from Tim Down can help?

Thanks!

General Grievance
  • 4,555
  • 31
  • 31
  • 45
user1322373
  • 61
  • 2

1 Answers1

2

It's tricky, because it's impossible to fully simulate a key event in general. Specifically, it's not possible in most browsers to trigger the default browser action for a key event without an actual keystroke having occurred.

That being the case, you have to do it manually, which is complicated. Arrow keys work on the visible text on the page, which means you need to take into account things like collapsed spaces, implied line breaks from <br> and block elements, elements hidden via the CSS display property and many other subtleties. Also, simulating up and down arrow keys relies on obtaining exact pixel co-ordinates of arbitrary characters on the page, which is non-trivial in most browsers.

I'm working on a means for navigating through the visible text on the page in Rangy, which will help with simulating left and right arrow keys, but Rangy can't help with up and down arrow keys.

Tim Down
  • 318,141
  • 75
  • 454
  • 536
  • Thanks a lot Tim, it's seems a bit more complicated than I thought, anyway simulating the left and right arrow keys is fine for me, please, let me know when you have something to test ;) – user1322373 Apr 13 '12 at 14:42
  • Hello Tim, any update on this? I can navigate left and right with rangy but when the caret finds a BR node stops and doesn't jump to the next line. any help on this? – user1322373 May 11 '12 at 21:18
  • @user1322373: Still working on it, and getting close to finishing. Should release a first version in the next couple of weeks. I'll post here when there's news: http://groups.google.com/group/rangy/topics – Tim Down May 11 '12 at 23:25