Using "contentEditable" on span and auto-selecting on click

I have contentEditable=“true” on some span tags on my page. The idea is to allow admin users to edit content inline on the page without having to send them to a giant form page. When only using contentEditable=“true” it works fantastically. You can click into the span and type away.

Now, the admin users want the text to be selected in the span once they click into it or bring focus to it by tabbing. I’m using the following function onclick and onfocus to get this working:

function selectText(el)
{
	var span = $(el);
	// FIREFOX
	if (Browser.Engine.gecko) {
		var div = document.createRange();
		div.setStartBefore(span);
		div.setEndAfter(span);
		window.getSelection().addRange(div);
	}
	// SAFARI
	else if (Browser.Engine.webkit) {
		var sel = window.getSelection();
		var range = document.createRange();
		range.selectNodeContents(el);
		sel.removeAllRanges();
		sel.addRange(range);
	}
}

This works PERFECTLY in Safari. You click the span, the text is selected and you start typing to replace the text.

Interesting thing: If you leave Firefox and then come back the text is no longer selected and the caret is blinking at the front of the span. You can now type.

In Firefox it selects the text just fine but it doesn’t allow you to type. Doesn’t throw an error either. Just keeps the text selected until you click out of it.

Anyone have any idea how to update this function to take care of this issue?

By the way, this is for an internal tool and users are only allowed to use the latest versions of Safari and Firefox. Aren’t I lucky?

The best treatment that I’ve seen on selecting text is at Quirksmode:
http://www.quirksmode.org/dom/range_intro.html

Perhaps you can find something useful there.

Hmm. Yeah, I can’t really find a solution there.