ContentEditable focus in Chrome/Safari

Question

I have a contenteditable div which needs to be focussed at pageload (place cursor at the first line).

document.getElementById("editor").focus() works well in Firefox and IE, but in Chrome/Safari it just selects the entire content!

Is there a way to make this work properly?

Thanks in advance,
Shesh

It seems to be browser limitation. Even with tab key also whenever div [contenteditable] gets focus it highlights text inside it. — Chinmayee G, Oct 11 '10 at 07:24
Thanks for the response! Yes, it seems to be the case with TAB too. :) — Sheshbabu, Oct 11 '10 at 07:28

score 2 · Answer 1 · answered Apr 13 '11 at 14:37

This question may no longer be relevant to the questioner but I'll answer it for future readers. The basic principle is to set the selection to a collapsed range at the start of the element.

I solved this problem by using the Rangy JS library: http://code.google.com/p/rangy

var r = rangy.createRange();
r.setStart( document.getElementById('editor'), 0 );
r.collapse(true);
rangy.getSelection().setSingleRange(r);

This might be more than is necessary but it definitely works cross-browser and Rangy provides a bunch of extra utilities as well so it's probably worth looking into :)

score 0 · Answer 2 · answered Dec 17 '13 at 16:57

0

I was able to add focus to a DIV by calling the focus() method chained to the attr() method

$el.attr('contenteditable', "true").focus()

answered Dec 17 '13 at 16:57

jona

154
1
3

ContentEditable focus in Chrome/Safari

2 Answers2

Linked