CODEWITHSUNDEEP
javascriptcontenteditablecaretrangy
user1322373
user1322373

Reputation: 61

simulate the cursor keys (left,right,down,up arrows) in a content editable div?

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!

Upvotes: 3

Views: 1988

Answers (1)

Tim Down
Tim Down

Reputation: 324657

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.

Upvotes: 2

Related Questions