asked on

focusNode is being taken away by a click outside a contenteditable div

I have a div where I've set contenteditable=true. After selecting some text in the div I'm able to execute things like document.execCommand('bold', false, false); and get the desired result.

But when I try this with document.execCommand('forecolor', false, color); nothing happens and I can see that the reason is that when I go off to my color picker to click a color box, : window.getSelection() shows on return that focusNode is now the color box .

I've done a jQuery .focus() on the original text div but that didn't bring focusNode back to the selected text. Could someone point out where I'm going wrong? It seems that if you click on something that doesn't have contenteditable=true, like my color box, it shouldn't move focusNode. I'm working with the FireFox browser.

Thanks for any suggestions.

Thanks.

Member_2_248744

greetings steva, , depending on how the "color picker" is displayed, you may have to kill (not show) the "color picker" display AFTER you get the color value from it. And then try to get focus back to the editable div.
Also, I have found that sometimes javascript code sequences can not be handled in the instant of time of the code lines (the DOM changes are not always instant, or the javascript code line continues even though the DOM has NOT completed the task), and you might try to use a delay to reset the focus using setTimeout( ) with 100 millisecond delay after you hide (close) the color picker.

steva

ASKER

Hi slick. Thanks for responding. I've collected more information since I posted. It has nothing to do with an element having contenteditable. If you select text on any web page the browser highlights it and then if you click somewhere else on the page the text you originally selected becomes un-highlighted, So what I'm seeing is normal behavior. You can prevent losing the focus when you click somewhere else by not letting that mousedown event propagate.So if you click on something else but don't let the event propagate up to where it steals the focus, you're good. That's what the links for Bold, etc. did, by ending with a return false. Or if you click on something that's draggable, you don't take the focus away, and I believe this is because UI draggable cancels its mousedown event.

But there are still things here that are not clear to me. You have cancel the event with return false. event.stopPropagation() doesn't do it. And you have to catch mousedown and cancel it. Catching click and canceling it doesn't work.: you lose focus.

So if you have some experience in this area, any light you (or anyone else) can shed would be much appreciated.

Thanks

ASKER CERTIFIED SOLUTION

Member_2_248744

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

steva

ASKER

Ok Slick. Thanks for your help. I gave you the points.