psogaa
asked on
How to capture select range event on a contenteditable div?
Hi Experts,
Say i have:
<div id="myDiv" ContentEditable="true">bla blabla 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 :)
Say i have:
<div id="myDiv" ContentEditable="true">bla
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 :)
ASKER
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.
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.
try this:
<div id="myDiv" onkeyup=runit() onmouseup=runit() ContentEditable="true">bla blabla blablabla</div>
<script>
function runit()
{
alert(document.selection.c reateRange ().text);
}
</script>
<div id="myDiv" onkeyup=runit() onmouseup=runit() ContentEditable="true">bla
<script>
function runit()
{
alert(document.selection.c
}
</script>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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 :)
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 :)
ASKER
Actually it works like a charm with those 2 events :)
Thanks!
Thanks!
so:
==========================
<div id="myDiv" ContentEditable="true">bla
<button onclick=alert(document.sel