Solved

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

Posted on 2013-06-03
4
900 Views
Last Modified: 2013-06-05
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.
0
Comment
Question by:steva
  • 2
  • 2
4 Comments
 
LVL 33

Expert Comment

by:Slick812
ID: 39219374
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.
0
 

Author Comment

by:steva
ID: 39219929
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
0
 
LVL 33

Accepted Solution

by:
Slick812 earned 500 total points
ID: 39222779
OK, from your beginning statement I failed to catch what you were doing (trying to do), and now I see your problem, I have done some in javascript for selecting and changing text (usually in a "textarea"), once you loose focus, you also loose Any and All for a reference to any highlighted text and can not go back to selected with system call,
So what I remember doing, was to get the beginning and end position of the selected text and store them in a global variable (array), before you change the focus, to another element to get text value or color value, and then when you have data for change get the TEXT element, and call system functions to RE-SELECT the text length, and then change the "selected" text or it's properties (color). There are thousands of web pages that can show you how to get the "selected start" position and selected length, and how to insert or change the selected, , I think I remember using  the JS "document.selection". I may can find some code for this, but it is a well documented tutorial thing for JS.
0
 

Author Closing Comment

by:steva
ID: 39223253
Ok Slick.  Thanks for your help.  I gave you the points.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article offers some helpful and general tips for safe browsing and online shopping. It offers simple and manageable procedures that help to ensure the safety of one's personal information and the security of any devices.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now