How to capture select range event on a contenteditable div?

Hi Experts,

Say i have:

<div id="myDiv" ContentEditable="true">blablabla blablabla</div>

Which event is triggered when i select (highlight) some of the text inside that div, and how do i catch it?

What i'm looking for is an equivalent to the "DisplayChanged" event fired by the old DHTML Editing Component.

Thanks in advance :)
LVL 2
psogaaAsked:
Who is Participating?
 
devicCommented:
or better so:
==================
<div id="myDiv" onkeyup=runit() onmouseup=runit() ContentEditable="true">blablabla blablabla</div>
<script>
function runit()
{
      if(document.selection.createRange().text!="")
      {
            alert(document.selection.createRange().text);
      }
}
</script>
0
 
devicCommented:
hi psogaa,

so:
===========================================================
<div id="myDiv" ContentEditable="true">blablabla blablabla</div>

<button onclick=alert(document.selection.createRange().text)>getSelection()</button>
0
 
psogaaAuthor Commented:
That is not what i want.

I want to capture the event that a user selects some text in my div.

From MSDN:
***************************************************************************
How do I update my application's menus and toolbars based on the current selection?
The DHTML Editing control fires the DisplayChanged event whenever the editing context has changed (for example, when the user has selected an element). Use this event to update your menus and toolbars by calling QueryStatus. The VBEdit sample in the DHTML Editing Component SDK demonstrates this technique by updating its toolbar to reflect formatting of the current selection.
***************************************************************************

This is exactly what I want to do - only I don't use the DHTML Editing control, i use a ContentEditable Div instead.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
devicCommented:
try this:

<div id="myDiv" onkeyup=runit() onmouseup=runit() ContentEditable="true">blablabla blablabla</div>
<script>
function runit()
{
      alert(document.selection.createRange().text);
}
</script>
0
 
psogaaAuthor Commented:
Hmm, yeah i guess keyup and mouseup covers all possible ways of selecting content.
Was hoping for a specific event for context change instead of a workaround.

I'll leave the question open for a while longer before i accept your comment as answer if you don't mind.

Thanks for the help so far :)
0
 
psogaaAuthor Commented:
Actually it works like a charm with those 2 events :)

Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.